PureJS iframe load button

user_15553245 0
Viewed 55

I load iframe with button, when i add a second button it doesn't work.

HTML:

<div class="iframe_container"></div>
<a href="javascript:;" class="button" data-id="/test">Test</a>

Script:

var button = document.querySelector(".button");
var iframeContainer = document.querySelector(".iframe_container");
    
button.addEventListener("click", function () {
  var dataId = button.getAttribute("data-id");
  if (dataId != null && dataId != undefined) {
    iframeContainer.innerHTML = "";
    iframeContainer.innerHTML =
      '<iframe src="' + dataId + '" title="" style="width:100%;"></iframe>';
   }
});

What i want to do=

<div class="iframe_container"></div>
<a href="javascript:;" class="button" data-id="/test">Test</a>
    
    
<div class="iframe_container"></div>
<a href="javascript:;" class="button" data-id="/foo">Test 2</a>

... but the second button is not working.

javascript
1 Answers

document.querySelector only catch the first DOM matching element ! You need querySelectorAll + do a loop on all element with the class, so you can add a listener on each.

 var buttons = document.querySelectorAll(".button");
 var iframeContainers = document.querySelectorAll(".iframe_container");

    
    for (let i = 0; i < buttons.length; i++){
        buttons[i].addEventListener("click", function () {
            var dataId = buttons[i].getAttribute("data-id");
            if (dataId != null && dataId != undefined) {
                iframeContainers[i].innerHTML = "";
                 iframeContainers[i].innerHTML =
                    '<iframe src="' + dataId + '" title="" style="width:100%;"></iframe>';
            }
        });
    }
user_152820660
Related