Cargo iframe con botón, cuando agrego un segundo botón no funciona.
HTML:
<div class="iframe_container"></div> <a href="javascript:;" class="button" data-id="/test">Test</a>Guion:
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>'; } });que quiero hacer =
<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>... pero el segundo botón no funciona.
¡ document.querySelector solo captura el primer elemento coincidente de DOM! Necesita querySelectorAll + haga un ciclo en todos los elementos con la clase, para que pueda agregar un oyente en cada uno.
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>'; } }); }