我写了javascript，假设在1-5之间的输入中输入数字1-5时更改图像，并提供其他警报; if / then / else和switch。
但是当我输入数字时，它会短暂地改变并且页面似乎重新加载。如果输入了else，则警报会按预期显示。不知道为什么。有人可以看看吗？任何反馈都会受到欢迎。
/*
Pseudo Code:
Load page.
Submit the number to either input for If/Then or Switch.
Check if the number is between 1-5.
If the number is between 1-5, change the image to match that number.
If the number is not 1-5 or text, display alert.
End program.
*/
//function for changing if/then statements from 1-5
function ifThenNumber() {
var ifThenInput = document.getElementById("userIfInput").value;
if (ifThenInput == 1)
document.getElementById("ifThenImage").src = "./number-images/one.gif";
else if (ifThenInput == 2)
document.getElementById("ifThenImage").src = "./number-images/two.gif";
else if (ifThenInput == 3)
document.getElementById("ifThenImage").src = "./number-images/three.gif";
else if (ifThenInput == 4)
document.getElementById("ifThenImage").src = "./number-images/four.gif";
else if (ifThenInput == 5)
document.getElementById("ifThenImage").src = "./number-images/five.gif";
else alert("Please put a number between 1-5");
} // end function ifThenNumber
//function for changing switch statements from 1-5
function switchNumber() {
var switchInput = document.getElementById("userSwitchInput").value;
switch (switchInput) {
case "1":
document.getElementById("switchImage").src = "./number-images/one.gif";
break;
case "2":
document.getElementById("switchImage").src = "./number-images/two.gif";
break;
case "3":
document.getElementById("switchImage").src = "./number-images/three.gif";
break;
case "4":
document.getElementById("switchImage").src = "./number-images/four.gif";
break;
case "5":
document.getElementById("switchImage").src = "./number-images/five.gif";
break;
default:
alert("Please put a number between 1-5");
} //end switch (switchInput)
} // end function switchImage<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lesson 4</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="numberStatement">
<table>
<tr>
<th> If/Then/Else </th>
<th> Switch </th>
</tr>
<tr>
<th>
<!--image with if/then/else statement-->
<img id="ifThenImage" src="./number-images/zero.gif" />
</th>
<th>
<!--image with switch statement-->
<img id="switchImage" src="./number-images/zero.gif" />
</th>
</tr>
<tr>
<!--instruction for user-->
<th> Enter number from 1 - 5 </th>
<th> Enter number from 1 - 5 </th>
</tr>
<tr>
<!--input that user can enter-->
<th>
<input type="text" name="userIfInput" id="userIfInput" size="20" />
</th>
<th>
<input type="text" name="userSwitchInput" id="userSwitchInput" size="20" />
</th>
</tr>
<tr>
<!--button to submitt the information-->
<th>
<button onclick="ifThenNumber()" >Submit</button>
</th>
<th>
<button onclick="switchNumber()" >Submit</button>
</th>
</tr>
</table>
</form>
</body>
</html>您需要提交按钮的prevent default behavior，这是发送表格数据和重新加载页面：
function ifThenNumber(event) {
event.preventDefault()
// all your logic here
}
弄清楚了！这是由于标签覆盖整个表而不仅仅是！