Recently, I delved into the world of web development and decided to test my skills by creating a basic webpage with an interactive top navigation bar. Depending on the link clicked, specific HTML elements would be displayed while turning off others using a switch statement.
However, things didn't go as planned.
Take a look at the HTML code snippet below:
<!DOCTYPE html>
<html>
<head>
<title>Care and Advice Clinic</title>
<script type="text/javascript" src="backend.js"></script>
<link rel = "stylesheet" type = "text/css" href = "stylesheet.css">
</head>
<body>
<ul>
<li><a href="#" onclick="javascript: StateMachine(1); return false;">
Contact and Address
</a></li>
<li><a href="#" onclick="javascript: StateMachine(2); return false;">
Operation Times
</a></li>
<li><a href="#" onclick="javascript: StateMachine(3); return false;">
About
</a></li>
<li><a href="#" onclick="javascript: StateMachine(4); return false;">
School of Diabetes
</a></li>
</ul>
<h1 style = "font-size: 40px; padding-top: 30px;"> Diabetes Care and Advice</h1>
<p id="Debug" style="font-size: 60px;"></p>
<p id="Contact" style="font-size: 60px;">
You have clicked on Contact and Address
</p>
<p id="OpTimes">You have clicked on OpTimes</p>
<p id="About">You have clicked on About</p>
<p id="School">You have clicked on School</p>
<script>javascript: StateMachine(0);</script>
</body>
</html>And here is part of the JavaScript code responsible for this behavior:
//The states are Contact (1), OperationTimes (2), About(3), School(4), home(0)
StateMachine(index);
function StateMachine(index){
switch(index){
case 0:
document.getElementById("Debug").innerHTML = "Switch case 0 entered";
document.getElementById("Optimes").style.display = 'none';
document.getElementById("About").style.display = 'none';
document.getElementById("School").style.display = 'none';
document.getElementById("Contact").style.display = 'none';
break;
// other cases omitted for brevity...
}While the debug message displays correctly, the switch statement fails to execute. Something seems to be amiss.
If anyone can provide guidance on where I might be going wrong, it would be greatly appreciated!