Страница продолжает загружаться, и измененное изображение не остается - PullRequest
0 голосов
/ 13 февраля 2019

Я написал 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>

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Разобрался!Это связано с тегом, охватывающим всю таблицу, а не только!

0 голосов
/ 13 февраля 2019

Вам необходимо запретить поведение по умолчанию кнопки отправки, которая отправляет данные формы и страницу перезагрузки:

function ifThenNumber(event) {
  event.preventDefault()
  // all your logic here
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...