Trying to articulate my query concisely is proving challenging. Let me do my best to provide a clear explanation.
The fixed header on my website features 4 buttons. I've created a JavaScript file that alters the class of each button when clicked. The class changes to "menuButtonSelected" for the clicked button and switches all others to "menuButton". Below is the JavaScript code:
function setButtonOne() {
// Function logic for button one
}
function setButtonTwo() {
// Function logic for button two
}
function setButtonThree() {
// Function logic for button three
}
function setButtonFour() {
// Function logic for button four
}
Each button has a unique ID (buttonOne, buttonTwo, buttonThree, buttonFour). In my HTML file, I assign the onclick attribute based on the button's ID. For example, buttonOne would have an onclick value of setButtonOne().
Here's a snippet of the relevant HTML code:
<a href="#home"><div id="buttonOne" class="menuButtonSelected" onclick="setButtonOne();titleHome();">
<p class="menuText">Home</p>
</div></a>
<a href="#projects"><div id="buttonTwo" class="menuButton" onclick="setButtonTwo();titleProjects();">
<p class="menuText">Projects</p>
</div></a>
<div id="buttonThree" class="menuButton" onclick="setButtonThree();">
</div>
<div id="buttonFour" class="menuButton" onclick="setButtonFour();">
</div>
The issue lies here.
Upon revisiting my site, I noticed that clicking the second button doesn't immediately trigger a change. Subsequent clicks work fine. Oddly, this problem occurs only with the second button while the third and fourth ones function correctly. It seems like the menuButtonSelected class reverts to the first button when clicking the second button.
I suspect there might be a flaw in the setButtonTwo() function, but I haven't identified it yet.
Any suggestions for resolving this?
Note: To view the website live, click here (content in Dutch).