0
私は数日前にウェブ開発を学び始めました。私は自分の足を濡らすための簡単なページを作りたいと思っていました。私は一番上のナビゲーションバーを持っていて、クリックされたHTML要素に応じて表示されます。私は他のすべての要素をオフにして問題のものだけを表示するためにswitch文を使用しました。クリックしたリンクに応じてHTML要素を表示
しかし何らかの理由で、期待どおりに動作していません。
ここに私のHTMLコードさ：
<!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>ここでは私のjavascriptのコードです：
//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;
case 1:
document.getElementById("Debug").innerHTML = "Switch case 1 entered";
document.getElementById("Optimes").style.display = 'none';
document.getElementById("About").style.display = 'none';
document.getElementById("School").style.display = 'none';
document.getElementById("Contact").style.display = 'block';
break;
case 2:
document.getElementById("Debug").innerHTML = "Switch case 2 entered";
document.getElementById("Contact").style.display = 'none';
document.getElementById("About").style.display = 'none';
document.getElementById("School").style.display = 'none';
document.getElementById("OpTimes").style.display = 'block';
break;
case 3:
document.getElementById("Debug").innerHTML = "Switch case 3 entered";
document.getElementById("Contact").style.display = 'none';
document.getElementById("Optimes").style.display = 'none';
document.getElementById("School").style.display = 'none';
document.getElementById("About").style.display = 'block';
break;
case 4:
document.getElementById("Debug").innerHTML = "Switch case 4 entered";
document.getElementById("Contact").style.display = 'none';
document.getElementById("Optimes").style.display = 'none';
document.getElementById("About").style.display = 'none';
document.getElementById("School").style.display = 'block';
break;
}
}これは、デバッグをプリントアウトmsg so document.getElementById（ "Debug"）。innerHTML = "スイッチケース0が入力されました";残りのswitch文は実行されません。
ここで間違っていることを誰かに教えてもらえますか？
私のために働いているようですが、コンソールに何かエラーがありますか？ –
要素は、それぞれのリンクをクリックしない限り、表示されてはならないときに表示されます。あなたは私と同じことをしていませんか？ –
申し訳ありませんが、どちらの答えも、あなたのHTMLで大文字の「T」を低い「t」に変更する必要があると判断するには早すぎました –