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.
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>';
}
});
}