I am working on a website that is structured into different sections using divs with shared classes but unique IDs. Each div is set to take up 100% of the viewport height. To navigate between these sections, I want to provide Up/Down arrow buttons for users to click on.
I have written a JavaScript script for these navigation buttons. Upon reviewing it line by line, everything seems correct, but unfortunately, it's not functioning as intended :( Any assistance would be greatly appreciated!
<div id="1" class="slideContainer"> </div>
<div id="2" class="slideContainer"> </div>
<div id="3" class="slideContainer"> </div>
<div class="up" id="up">
<img src="img/up.png">
</div>
<div class="down" id="down">
<img src="img/down.png">
</div>
document.getElementById("up").addEventListener("click", goUp);
function goUp() {
var visibleId = $("div.slideContainer:visible").prev().attr('id');
var targetID = visibleId;
document.getElementById(targetID).scrollIntoView();
}
document.getElementById("down").addEventListener("click", goDown);
function goDown() {
var visibleId = $("div.slideContainer:visible").next().attr('id');
var targetID = visibleId;
document.getElementById(targetID).scrollIntoView();
}