I have a home page where I have 6 buttons displayed. Each button directs me to another page where I have some info and a “Discover” button. Normally each button should direct me to a specific link but I have a problem that my index is always set to 0 and it doesn’t change.
I want the index to be depending on the solution the user chooses in the home page.
const solutions = [{}];
document.querySelectorAll('.discover-button').forEach(function(button, index) {
button.addEventListener('click', function(event) {
var solutionIndex = index; console.log(solutionIndex);
var videoIframe = document.getElementById('videoIframe');
var videoUrl = solutions[solutionIndex].url;
videoIframe.src = videoUrl;
document.getElementById('iframeContainer').style.display = 'block';
});
});
function closeIframe() {
var videoIframe = document.getElementById('videoIframe');
videoIframe.src = '';
document.getElementById('iframeContainer').style.display = 'none';
}<button class="discover-button">Discover</button>
<button class="discover-button">Discover</button>
<button class="discover-button">Discover</button>
<button class="discover-button">Discover</button>
<button class="discover-button">Discover</button>
<button class="discover-button">Discover</button>
<div class="iframe-container" id="iframeContainer">
<button class="close-iframe" onclick="closeIframe()">X</button>
<iframe id="videoIframe" title="Video presentation"></iframe>
</div>
New contributor
Asser is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
4