CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Adrian Solarczyk
Adrian Solarczyk

Reputation: 247

Same coded divs not working the same

by continuing my project I met a problem with same coded divs which are modal (popup) windows triggering on button clicks.

Here you can spot the problem - 'O mnie' (about) window working well, and same coded 'Kontakt' (contact) window not working - http://antoszbk.pl/

Fragments of code working well (or not):

Code:

var aboutw = document.getElementById("myAbout");
var button1 = document.getElementById("aboutbtn");
var span = document.getElementsByClassName("close")[0];

var contactw = document.getElementById("myContact");
var button3 = document.getElementById("contactbtn");
var span2 = document.getElementsByClassName("close2")[0];


window.onload = function() {

  button1.onclick = function() {
    aboutw.style.display = "block";
    aboutw.style.animation = "slideInDown 0.5s";
  }

  span.onclick = function() {
    aboutw.style.animation = "slideOutUp 0.5s";
    setTimeout(function() {
      aboutw.style.display = "none";
    }, 500);
  }

  button3.onlick = function() {
    contactw.style.display = "block";
    contactw.style.animation = "slideInDown 0.5s";
  }

  span2.onclick = function() {
    contactw.style.animation = "slideOutUp 0.5s";
    setTimeout(function() {
      contactw.style.display = "none";
    }, 500);
  }

  window.onclick = function(event) {
    if (event.target == aboutw || event.target == contactw) {
      aboutw.style.animation = "slideOutUp 0.5s";
      contactw.style.animation = "slideOutUp 0.5s";
      setTimeout(function() {
        aboutw.style.display = "none";
        contactw.style.display = "none";
      }, 500);
    }
  }
}
<div id="mySidenav" class="Sidenav">
  <a href="#about" id="aboutbtn">O mnie</a>
  <a href="#achievements">Portfolio</a>
  <a href="#contact" id="contactbtn">Kontakt</a>
</div>

// WORKING WELL
<div id="myAbout" class="about">
  <div class="about-content">
    <span class="close">&times;</span>
    <p> Wkrótce tutaj coś będzie... </p>
  </div>
</div>

// NOT WORKING WELL
<div id="myContact" class="contact">
  <div class="contact-content">
    <span class="close2">&times;</span>
    <p> Wkrótce tutaj coś będzie... </p>
  </div>
</div>

Upvotes: 0

Views: 50

Answers (1)

Moob
Moob

Reputation: 16184

Just a simple typo!

button3.onlick = function() {...

Should read:

button3.onclick = function() {

(ie: "onClick" not "onLick")

Upvotes: 1

Related Questions