Я написал javascript, который предполагает изменение изображения при вводе числа 1-5 на входе между 1-5 и оповещение еще;оба if / then / else и switch.
Но когда я ввожу число, оно ненадолго меняется, и страницы, кажется, перезагружаются.Если еще введено, то предупреждение показывается, как и ожидалось.Не уверен почему.Может кто-нибудь, пожалуйста, посмотрите?Любая обратная связь будет приветствоваться.
/*
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>