2013-07-29 11 views
0

ПОМОЩЬ! Мне нужно знать, что для этого кода появится окно предупреждения, но кнопка отправки не вызывает его! Что такое ошибка и как я могу исправить код, не изменяя его полностью? Благодаря!Отправить сообщение об ошибке. Как определить ошибку и исправить код?

<!DOCTYPE html> 

<html> 
<head> 

<title>Dougie's Script</title> 
<script> 
    var textinput; 


    function submitHandler(e){ 
     alert("You entered " + textinput.value + "\n"); 
     e.preventDefault(); 
    } 

    textinput=document.getElementById("textfield"); 
    var form = document.getElementById("theform"); 

    form.addEventListener("submit", submitHandler, false); 

</script> 
</head> 
<body> 
<form id="theform" action="#"> 
    <label>Enter text here...</label> 
    <input id="textfield" type="text" > 
    <input type="submit" value="Submit" > 
</form> 
</body> 
</html> 
+0

Вы получаете элемент, но элемент пока не готов/готов ... – Ian

ответ

0

Переместить это под формой закрывающий тег:

<script type="text/javascript"> 
textinput=document.getElementById("textfield"); 
var form = document.getElementById("theform"); 

form.addEventListener("submit", submitHandler, false); 
</script> 
0

Переместите <script> тег в нижней части <body>:

</form> 
    <script>...</script> 
</body> 

Прямо сейчас, ваш скрипт пытается выглядеть для элементов, которые еще не созданы. Альтернативой могло бы случиться событие documentDOMContentLoaded, но это не кросс-браузер.

0

Попробуйте переместить свой тег сценария в самую нижнюю часть тела. Таким образом, сценарий будет выполняться после загрузки документа (а затем ваши элементы должны быть «gettable» и «listener-attachable».)

0

Проблема в том, что элементы страницы еще не загружены, когда javascript побежал. Поэтому document.getElementById("textfield") не возвращает элемент, и к нему не привязано никакого события.

Попробуйте герметизирующего обработки событий вашего яваскрипта кода следующим образом:

var textfield; 
function submitHandler(e) { ... } 

// When the window loads, run this function. 
window.onload = function() { 
    textfield = document.getElementById("textfield"); 
    var form = document.getElementById("theform"); 

    form.addEventListener("submit", submitHandler, false); 
} 

Это удостоверится событие привязано к элементу, когда он будет загружен.

0

Помните о том, чтобы держать вещи в сфере охвата; где вы захватываете ввод текста динамически каждый раз, когда вы вызываете функцию в порядке, чтобы сохранить значение, обновляющееся в ответе. Кроме того, убедитесь, что DOM загружен, прежде чем пытаться получить доступ к элементам в HTML дерева, и так как вы используете addEventListener, вот рабочая версия вашего сценария:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Dougie's Script</title> 
     <script> 
      (function(d){ 
       var init = function(){ 
        var form = d.getElementById("theform"), submitHandler = function(e){ 
         var textinput = d.getElementById("textfield"); 
         alert("You entered " + textinput.value + "\n"); 
         e.preventDefault(); 
        }; 
        form.addEventListener("submit", submitHandler, false); 
       }; 
       d.addEventListener("DOMContentLoaded", init, false); 
      })(document); 
     </script> 
    </head> 
    <body> 
     <form id="theform" action="#"> 
      <label for="textfield">Enter text here...</label> 
      <input id="textfield" type="text" > 
      <input type="submit" value="Submit" > 
     </form> 
    </body> 
</html> 
Смежные вопросы