I have a file called index.html that contains two dropdown containers and an iframe. The first dropdown container works with the iframe, but the second one does not. Can anyone help me fix this issue?
I am having trouble understanding the script for changing the iframe:
function iframeChange() {
var buttons = document.querySelector(".dropdown-container");
var iframe = document.getElementById('frame');
var mySelect = document.getElementById('mySelect');
buttons.addEventListener("click", function (e) {
mySelect.src = e.target.dataset.src;
mySelect.id = e.target.dataset.id;
mySelect.width = e.target.dataset.width;
mySelect.height = e.target.dataset.height;
mySelect.title = e.target.dataset.title;
iframe.src = e.target.dataset.src;
iframe.width = e.target.dataset.width;
iframe.height = e.target.dataset.height;
iframe.title = e.target.dataset.title;
});
}
window.onload = iframeChange;
The script is running on my local PC.
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<button id="mySelect" class="dropdown-btn">BCA - SALES
<i class="fa fa-caret-down"></i>
</button>
<div id="mySelect" class="dropdown-container">
<li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=83e3821d-2afc-45bd-be16-7d95a1065a8d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD I</a></li>
<li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=828499e7-da76-4f1c-aa43-b4accbfbd203&opt=currsel" data-width="100%" data-height="550px">DASHBOARD II</a></li>
<li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=89c0893e-d526-4af3-aaf8-68a1d54cb96d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD III</a></li>
<li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=7b3fe051-8219-469f-994b-7ea249ee2b73&opt=currsel" data-width="100%" data-height="550px">DASHBOARD IV</a></li>
</div>
<button id="mySelect" class="dropdown-btn">BCA - MARKETING
<i class="fa fa-caret-down"></i>
</button>
<div id="mySelect" class="dropdown-container">
<li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=83e3821d-2afc-45bd-be16-7d95a1065a8d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD I</a></li>
<li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=828499e7-da76-4f1c-aa43-b4accbfbd203&opt=currsel" data-width="100%" data-height="550px">DASHBOARD II</a></li>
<li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=89c0893e-d526-4af3-aaf8-68a1d54cb96d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD III</a></li>
<li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=7b3fe051-8219-469f-994b-7ea249ee2b73&opt=currsel" data-width="100%" data-height="550px">DASHBOARD IV</a></li>
</div>
I expect both dropdowns to work properly.
Source file: https://github.com/GoLeR797370/Perpustakaan23.git Download mashup.html