2015-12-01 2 views
0

Приветствую всех, кто я в школе для разработки программного обеспечения, а не новенького, но все же студент в области с большим количеством уроков, и мне было интересно, может ли кто-нибудь сказать мне, если бы я просто делал новичка ошибка. У меня было задание домашней работы в моем классе html и JavaScript, чтобы создать страницу, на которой кто-то мог бы указать имя, возраст и запрос изменения цвета фона с помощью JavaScript. Я смог выполнить задание, но после предупреждения, чтобы сообщить вам свое имя, возраст и цвет, на котором был обрамлен фон (на данный момент фон - это цвет, который вы положили), он сбрасывает форму/страницу. Я не знаю, почему это делает это, и никто не делает этого в моем классе, поэтому мне было интересно, может ли кто-нибудь сказать мне, почему он отдыхает, и если это то, что я сделал в коде, чтобы я мог следить за ним в будущем ,Не знаю, почему он переиздан

<!DOCTYPE html>  
<html> 
    <head> 
    <script> 
     function getInformation() { 
      var strColor = prompt("What is your favorite color"); 
      var strFirstName = document.getElementById("txtName").value; 
      var strYourAge = document.getElementById("txtAge").value; 
      document.body.style.backgroundColor= strColor;  
      alert(strFirstName + "Your favorite background color was applied to the backgrond of the page. \n\n and your age is" + strYourAge);  
     } 
    </script> 
    </head> 

    <body> 
     <form> 
      <table> 
       <tr> 
        <td><label>First Name</label> 
       </tr> 
       <tr> 
        <td><input id="txtName" type="text" name="Name" required></td> 
       </tr> 
       <tr> 
        <td><label>Your Age</label></td> 
       </tr> 
       <tr> 
        <td><input id="txtAge" type="number" name="Age" required></td> 
       </tr> 
       <tr> 
        <td><button onclick="getInformation()">Submit</button></td> 
       </tr> 
      </table> 
     </form> 
    </body> 
</html> 
+3

Это, кажется, сегодня эпидемия;) Знаете ли вы, что происходит, когда вы отправляете форму? – Teemu

ответ

0

Добавить тип = "кнопка" в этой строке не достичь не обновления.

<td><button type="button" onclick="getInformation()">Submit</button></td> 

Ссылка на этот вопрос для получения дополнительной информации:

prevent refresh of page when button inside form clicked

1

Это происходит потому, что при нажатии на кнопку Submit в вашей форме, она представляет форму. Поскольку (из того, что я могу сказать по вашему коду) вы не хотите на самом деле отправлять форму, все, что вам нужно сделать, это удалить тег <form></form>.

Рассмотрим следующую версию:

<!DOCTYPE html>  
<html> 
    <head> 
    <script> 
     function getInformation() { 
      var strColor = prompt("What is your favorite color"); 
      var strFirstName = document.getElementById("txtName").value; 
      var strYourAge = document.getElementById("txtAge").value; 
      document.body.style.backgroundColor= strColor;  
      alert(strFirstName + "Your favorite background color was applied to the backgrond of the page. \n\n and your age is" + strYourAge);  
     } 
    </script> 
    </head> 
    <body> 
     <!-- <form> was removed --> 
     <table> 
      <tr> 
       <td><label>First Name</label> 
      </tr> 
      <tr> 
       <td><input id="txtName" type="text" name="Name" required></td> 
      </tr> 
      <tr> 
       <td><label>Your Age</label></td> 
      </tr> 
      <tr> 
       <td><input id="txtAge" type="number" name="Age" required></td> 
      </tr> 
      <tr> 
       <td><button onclick="getInformation()">Submit</button></td> 
      </tr> 
     </table> 
    </body> 
</html> 

Примечание:

Если вы хотите узнать больше о form теге, не стесняйтесь, чтобы узнать больше об этом here.

form тег должен иметь:

  • action - Где вы хотите отправить данные формы.
  • method - Как вы хотите отправить эти данные.

Рассмотрим следующий пример:

<form action="demo_form.asp" method="get"> 
    First name: <input type="text" name="fname"><br> 
    Last name: <input type="text" name="lname"><br> 
    <input type="submit" value="Submit"> 
</form> 
0

Привет всем спасибо за помощь! Я пробовал в обоих направлениях и в конечном итоге пошел с Питом Р. С кнопкой типа Если мне нужна форма в будущем, я все равно буду в том же затруднительном положении, что это освежает. С помощью кнопки типа я могу сохранить форму для последующей модификации и не иметь проблемы с обновлением.

Ник Z Я ценю ссылку на информацию и вызывающе использую ее. Я все еще довольно новичок в этой области и всегда ищу хорошие ссылки для информации, чтобы помочь мне.

Еще раз спасибо вам за вашу помощь!

Смежные вопросы