Why does this JS function not work more than once if I use it multiple times on 1 page?

Question

I am making a page which will have several buttons. When a button is pressed, a div shows up, containing an embedded YouTube video. Pressing the button again (or pressing the 'X' button) will then close the div.

In addition, the iframes are empty until a button is pressed, as the div becomes visible, the iframe src is also filled out. This is because the page will contain more than 15 embedded videos, so I don't want them to load when first loading the page, as that will take forever.

I came up with the below script. In this example, the elemend with ID definitie1 is the div in which the iframe is placed, and the iframe itself has ID frame1

function defineer1() {
    "use strict";
    var definitie = document.getElementById ("definitie1");
    var frame1 = document.getElementById ("frame1");

    if (definitie.style.display === "none"){
        definitie.style.display = "flex";
        frame1.src="https://www.youtube-nocookie.com/embed/lZ6P0nUh598?controls=0?enablejsapi=1&rel=0";
    } else {
        definitie.style.display = "none";
        frame1.src="";
    }
} 

I ran this through JSlint, and it accepts the code as long as I 'assume browser' and 'tolerate whitespace mess'.

On the page, I create the button and the hidden div like this:

<div class="begrip" id="begrip1" onclick="defineer1()">
    <p class="begriptext" onclick="defineer1()">Distributieriem</p>
</div>
<div class="definitie" id="definitie1">
    <iframe id="frame1" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
    <button class="wegknop" onclick="defineer1()">X</button>
</div>

And this is the CSS that goes along with it (at least for testing purposes).

#begrip1 {
    width:150px;
    background-color:blue;
    color:white;
    height:50px;
    line-height:50px;
    text-align:center;
}

.definitie {
    display:none;
    background-color: blue;
    width:700px;
}

In and off itself, this works fine, but as soon as I create another function defineer2() and the corresponding button and hidden div (as shown below), the scripts starts acting up. I can still click the button and get the hidden div to show up, and on a second click, the div will disappear, but then after that, if I click the button, it just keeps setting style.display to none, instead of to flex. Thus,the div cannot be made visible a second time.

JS for 2 buttons and 2 divs:

function defineer2() {
    "use strict";
    var definitie2 = document.getElementById("definitie2");
    var frame2 = document.getElementById("frame2");

    if (definitie2.style.display === "none") {
        definitie2.style.display = "flex";
        frame2.src = "https://www.youtube-nocookie.com/embed/n1uNzdn3ji0?controls=0&rel=0";
      } else {
        definitie2.style.display = "none";
        frame2.src = " ";
      }
  }

function defineer1() {
    "use strict";
    var definitie = document.getElementById("definitie1");
    var frame1 = document.getElementById("frame1");

    if (definitie.style.display === "none") {
        definitie.style.display = "flex";
        frame1.src = "https://www.youtube-nocookie.com/embed/lZ6P0nUh598?controls=0?enablejsapi=1&rel=0";
     } else {
        definitie.style.display = "none";
        frame1.src = "";
  }
}

Corresponding CSS:

#begrip2 {
    width:150px;
    background-color:red;
    color:white;
    height:50px;
    line-height:50px;
    text-align:center;
}

#begrip1 {
    width:150px;
    background-color:blue;
    color:white;
    height:50px;
    line-height:50px;
    text-align:center;
}

.definitie {
    display:none;
    background-color: blue;
    width:700px;
}

and HTML:

<div class="begrip" id="begrip2" onclick="defineer2()">
    <p class="begriptext" onclick="defineer2()">Balanceren</p>
</div>
<div class="definitie" id="definitie2">
    <iframe id="frame2" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
    <button class="wegknop" onclick="defineer2()">X</button>
</div>
<div class="begrip" id="begrip1" onclick="defineer1()">
    <p class="begriptext" onclick="defineer1()">Distributieriem</p>
</div>
<div class="definitie" id="definitie1">
    <iframe id="frame1" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
    <button class="wegknop" onclick="defineer1()">X</button>
</div>

JSFiddle I tried to create this in JSFiddle, but it doesn't seem to work there at all (although I might just have been using it incorrectly)

• Fiddle with one button/div: https://jsfiddle.net/004L2t8r/2/
• Fiddle with two buttons/divs: https://jsfiddle.net/zcecmhwq/1/

What have I tried? As mentioned, i've ran my code through JSLint. I did this both for 1 function and for several functions, and it accepts my code as long as I select 'assume browser' and 'tolerate whitespace mess'.

Furthermore, i've used the Firefox console and established it doesn't give any JS errors, and I established the function appears to keep changing style:display to none, rather than not responding at all.

I have used Google, DuckDuckGo and SO to look for an answer, but have been unsuccessful in finding anyone with the same problem.

I have considered doing this in JQuery, as this way of doing it is probably not the most efficient, but I can't figure out how to do this in JQ, so I figured I'd best stick to vanilla JS.

update After having added the console log part as suggested by besciualex, I received these results. I have every single click results in 2 lines in the log.

Answer 1

You don't need to create the same function for similar things. Just add a parameter as input in your function like bellow. Then you call it by onclick="defineer1('https://google.com')"

Also, I think that your issue (being stuck only in else loop) happens because after two function calls, the value of definitie.style.display is not "none" but rather something else. That's why i left the console.log call.

"use strict";

function defineer1(iframe_src) {
  var definitie = document.getElementById("definitie1");
  var frame1 = document.getElementById("frame1");

  console.log(definitie.style.display);

  if (definitie.style.display == "none") {
    definitie.style.display = "flex";
    frame1.src = iframe_src;
  } else {
    definitie.style.display = "none";
    frame1.src = "";
  }
}

Answer 2

Issue is your click event bubbles. When you click, first click of p tag is fired and then click of parent div.

You should add eventListeners from JS using addEventListener and use event.stopPropagation() to stop bubble effect.

JSFiddle