Simple click event not firing, console returns impossible or no error at all

Question

document.addEventListener("load", function()
{
var firstGal = document.querySelector("containsNext");

var nextB = document.querySelector("nondynamic");

nextB.addEventListener('click', function(){ firstGal.style.opacity = 0;});
});

This is the function causing the issues, all else runs fine. I am just testing something before i go on to final layout idea, and want to test if the nondynamic next button works and animates the pic in containsNext on click. Just animating the opacity for test purposes. If i try to run this without the onload, i get many reference errors and all kinds of undefined elements. Oddly, codepen even gave me errors on some lines which I have deleted hours ago:-) Ok, so by adding the on load property, there are no errors thrown, but the code does not run. Am i overlooking the proverbial elephant in the room here? Both concerned elements are not dynamically created(unlike most of the page). Thank you guys for the heads up.

Link to the pen: http://codepen.io/damianocel/pen/gPggLB

Answer 1

window.addEventListener works better than document.addEventListener based on

this answer

Also, to select your "nondynamic" css selector you need a dot for the class selector:

var nextB = document.querySelector(".nondynamic");

Finally, querySelector will only return the first element with that class so make sure it's the first one on your page...or provide a unique id for the "Next" element and select based on the id instead like:

<div id="yourIdHere" class="nondynamic">Next</div>

var nextB = document.querySelector("#yourIdHere");

Answer 2

My proposal is:

var arrayIndex = ['url("http://www.croatiaweek.com/wp-content/uploads/2013/02/photo_twitter_chris_hadfield1.jpg")','url("http://i.dailymail.co.uk/i/pix/2014/03/07/article-2575552-1C1A7B9400000578-567_964x673.jpg")', 'url("http://www.thegoldenscope.com/wp-content/uploads/2015/10/vicogargano-1a.jpg")'];


window.addEventListener("load", function()
                        {
  var firstGal = document.getElementsByClassName("containsNext");

  var nextB = document.getElementsByClassName("nondynamic");

  nextB[0].addEventListener('click', function(){

    firstGal[0].style.opacity = 0;});
});



var closingButtons = document.getElementsByClassName("closingButton");
var index = 0, length = closingButtons.length;
for ( ; index < length; index++) {
  closingButtons[index].addEventListener("click",
                                         function () {
    hidePic(this);
  }
                                        );
}

function addImageInto(arrayIndex, container) {
  var displayArea = document.querySelector('.displayArea');
  if (displayArea.querySelector('.' + container.id)) {
    return;
  }
  displayArea.innerHTML = '';


  var previous = document.createElement("div");
  previous.textContent = "Previous";
  previous.style.width = "100px";

  previous.style.height = "20px";
  previous.style.background = "violet";
  previous.className = "prevPic";
  displayArea.appendChild(previous);
  var span = document.createElement("div");
  span.textContent = "Close";
  // could also be firstChild.nodeValue = "Some new label text!";
  span.style.width = "60px";
  span.style.height = "20px";
  span.style.background = "red";
  span.className = "closingButton";
  displayArea.appendChild(span);
  var div = document.createElement("div");
  div.style.width = "500px";
  div.style.height = "200px";
  div.style.backgroundImage = arrayIndex;
  div.style.backgroundRepeat = "no-repeat";
  div.style.backgroundSize = "contain";
  div.style.backgroundSize = "100% 100%";

  div.style.boxShadow = "3px 3px 4px blue";
  div.style.margin = "5px auto";
  div.className = "images";
  displayArea.appendChild(div);
  div.style.opacity = 0;

  setTimeout(function() {
    div.style.opacity = 1;
  }, 500);
  span.addEventListener("click", function(event){
    event.stopPropagation();

    var finalTarget = this.parentNode.getElementsByClassName('images')[0];


    var finalTarget4 = this.parentNode.getElementsByClassName('closingButton')[0];
    setTimeout(function(){

      var obj1 = finalTarget.style;
      obj1.height = 0;
      obj1.opacity = 0;
      // obj1.width = 0;



      var obj4 = finalTarget4.style;
      obj4.height = 0;
      obj4.opacity = 0;
      obj4.width = 0;
    },1000);
  });


}

function createFunctionClickListener(arrayIndex) {
  // This returns a listener / callback function.
  return function(event) {
    var container = event.currentTarget;
    addImageInto(arrayIndex, container);
  };
}

// Croatia
document.getElementById("newDom").addEventListener("click",   createFunctionClickListener(arrayIndex[0]));

// Spain
document.getElementById("newDom2").addEventListener("click",
                                                    createFunctionClickListener(arrayIndex[1]));

// Italy
document.getElementById("newDom3").addEventListener("click",
                                                    createFunctionClickListener(arrayIndex[2]));

body{width:100%;
  height:100%;
  background-image: url('http://eoimages.gsfc.nasa.gov/images/imagerecords/55000/55167/earth_lights_lrg.jpg');
  background-size:100% 100%;
  z-index:-1;
  background-repeat:no-repeat;
  background-position: right top;
  background-attachment: fixed;
}
h2{text-align:center;
  color:#fff;
  text-shadow:2px 1px 2px silver;}
button{border: #000 solid 1px;
  box-shadow:2px 2px 2px blue;
  background:transparent;
  color:white;
  font-size:1em;
  font-weight:400;
  text-shadow:1px 1px 1px #fff;
  padding:2px 7px;}

.images{transition:1s;!important;}
.images:hover{
  transform: translate(0px,-30px)scale(1.1);!important;
}
.closingButton{font-size:1em;
  color:white;
  padding-top:3px;
  box-shadow:2px 2px 1px purple;
  margin:2px auto;
  text-align:center;}

.prevPic{font-size:1em;
  color:white;
  padding-top:3px;
  box-shadow:2px 2px 1px purple;
  position:relative;
  top:27px;
  text-align:center;}
.nondynamic{width:100px;
  font-size:1em;
  color:white;
  padding-top:3px;
  box-shadow:2px 2px 1px white;
  position:relative;
  top:50px;left:70%;text-align:center;cursor:pointer;}


.displayArea{width:500px;
  margin:10px auto;}

.containsNext{
  border:2px white solid;
  width:500px;
  height:200px;
  z-index:100;position:relative;top:-190px;
  transform:rotateX(10deg);
  margin:10px auto;
  background:url(http://www.pxleyes.com/images/contests/croatia%20beach/fullsize/croatia%20beach_4c51a7c40c71c_hires.jpg);
  background-size:100% 100%;}

<h2 id="header">Creating elements with native JS and prototype/inheritance practice</h2>
<div class="nondynamic">Next</div>
<button id="newDom">Croatia</button>
<button id="newDom2">Spain</button>
<button id="newDom3">Italia</button>
<button id="newDom4">Sweden</button>
<button id="newDom31">France</button>
<button id="newDom32">France</button>
<button id="newDom33">France</button>
<button id="newDom34">France</button>
<button id="newDom35">France</button>
<button id="newDom36">France</button>
<button id="newDom37">France</button>
<button id="newDom38">France</button>
<div class="displayArea"></div>
<div class="containsNext"></div>

Answer 3

Zefiryn is right, you should use . as the selectors are CSS classes and it is more reliable to add the event listener to the object window. Please, try this:

window.addEventListener( "load", function()
{
    var firstGal = document.querySelector( ".containsNext" );

    var nextB = document.querySelector( ".nondynamic" );

    nextB.addEventListener( 'click', function()
    {

        firstGal.style.opacity = 0;
    } );
} );

Check this link also https://developer.mozilla.org/en-US/docs/Web/Events/load and see the note below the example provided.

Good luck!