Question

我写了一个javascript，它想在1-5之间的输入中输入1-5时改变图像，否则发出警报。如果/然后/否则都切换。

但是当我输入数字时，它会短暂更改，页面似乎会重新加载。如果放入其他内容，则警报将按预期显示。不知道为什么。有人可以看看吗？任何反馈都将受到欢迎。

/*
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>

Answer 1

您需要prevent default behavior的提交按钮，即发送表单数据并重新加载页面：

function ifThenNumber(event) {
  event.preventDefault()
  // all your logic here
}

Answer 2

想通了！这是因为标签覆盖了整个表格，而不仅仅是！

页面不断重新加载，更改后的图像不保留

2 个答案: