JavaScript Błąd Null nie jest obiektem

Im uzyskiwanie błąd w Web Inspector, jak pokazano poniżej:JavaScript Błąd Null nie jest obiektem

TypeError: 'null' is not an object (evaluating 'myButton.onclick = function() { 
var userName = myTextfield.value; 
greetUser(userName); 

return false; 

}')

Tu jest mój kodu (HTML):

<h2>Hello World!</h2> 
<p id="myParagraph">This is an example website</p> 

<script src="js/script.js" type="text/javascript"></script> 

<form> 
    <input type="text" id="myTextfield" placeholder="Type your name" /> 
    <input type="submit" id="myButton" value="Go" /> 
</form>

Oto JS:

var myButton = document.getElementById("myButton"); 
var myTextfield = document.getElementById("myTextfield"); 

function greetUser(userName) { 
var greeting = "Hello " + userName + "!"; 
document.getElementsByTagName ("h2")[0].innerHTML = greeting; 
} 

myButton.onclick = function() { 
var userName = myTextfield.value; 
greetUser(userName); 

return false; 

}

Dowolny pomysł, dlaczego pojawia się błąd?

Źródło

2013-01-08 Mark H

To nie jest twój problem, ale polecam użycie funkcji obsługi zdarzeń 'submit' w formularzu zamiast obsługi zdarzeń' click' na przycisku. Wtedy zadziała, jeśli ktoś naciśnie przycisk enter. – icktoofay

Umieść kod tak, aby był wykonywany po zdefiniowaniu elementów, albo wywołanie zwrotne DOM DOM ready lub umieść źródło pod elementami w kodzie HTML.

document.getElementById() zwraca null jeśli element nie został znaleziony. Przypisanie własności może wystąpić tylko na obiektach. null nie jest obiektem (w przeciwieństwie do tego, co mówi typeof).

Źródło

2013-01-08 03:49:26 alex

Witam Alex, dziękuję za szybką odpowiedź. Przeniosłem źródło. Będąc nowicjuszem w JavaScript, możesz wyjaśnić, czym jest wywołanie zwrotne DOM? Ale dzięki za odpowiedź pomógł :) –

@MarkH Mogę, ale [tutaj jest lepsze wyjaśnienie] (http://stackoverflow.com/questions/978740/javascript-how-to-detect-if-document-has- załadowany-ie-7-firefox-3). – alex

Mam ten błąd - nie mam pewności co do tej odpowiedzi. Co Alex ma na myśli, mówiąc: "umieść źródło pod elementami w HTML"? – LaurelS

Spróbuj załadować javascript po.

Spróbuj tego:

<h2>Hello World!</h2> 
<p id="myParagraph">This is an example website</p> 

<form> 
    <input type="text" id="myTextfield" placeholder="Type your name" /> 
    <input type="submit" id="myButton" value="Go" /> 
</form> 

<script src="js/script.js" type="text/javascript"></script>

Źródło

2013-01-08 03:56:23

Zgadzam się z Alex o upewniając się, że DOM jest załadowany. Sądzę również, że przycisk "Prześlij" spowoduje odświeżenie.

To jest to, co chciałbym zrobić

<html> 
<head> 
<title>webpage</title> 
</head> 
<script type="text/javascript"> 
var myButton; 
var myTextfield; 

function setup() { 
    myButton = document.getElementById("myButton"); 
    myTextfield = document.getElementById("myTextfield"); 
    myButton.onclick = function() { 
    var userName = myTextfield.value; 
    greetUser(userName); 
    return false; 
    } 
} 

function greetUser(userName) { 
    var greeting = "Hello " + userName + "!"; 
    document.getElementsByTagName("h2")[0].innerHTML = greeting; 
} 

</script> 
<body onload="setup()"> 
    <h2>Hello World!</h2> 
    <p id="myParagraph">This is an example website</p> 

    <form> 
    <input type="text" id="myTextfield" placeholder="Type your name" /> 
    <input type="button" id="myButton" value="Go" /> 
    </form> 
    </body> 
</html>

baw!

Źródło

2013-01-08 04:07:44 earlonrails

Każdy kod JS, który wykonuje i obsługuje elementy DOM, powinien zostać wykonany po utworzeniu elementów DOM. Kod JS jest interpretowany od góry do dołu zgodnie z kodem HTML. Tak więc, jeśli istnieje znacznik przed elementami DOM, kod JS w znaczniku skryptu zostanie wykonany, gdy przeglądarka będzie analizować stronę HTML.

W twoim przypadku możesz umieścić swój kod interakcji DOM w funkcji, tak że zdefiniowana jest tylko funkcja, ale nie jest wykonywana.

Następnie można dodać detektor zdarzeń do ładowania dokumentu w celu wykonania funkcji.

To daje coś takiego:

<script> 
    function init() { 
    var myButton = document.getElementById("myButton"); 
    var myTextfield = document.getElementById("myTextfield"); 
    myButton.onclick = function() { 
     var userName = myTextfield.value; 
     greetUser(userName); 
    } 
    } 

    function greetUser(userName) { 
    var greeting = "Hello " + userName + "!"; 
    document.getElementsByTagName ("h2")[0].innerHTML = greeting; 
    } 

    document.addEventListener('readystatechange', function() { 
    if (document.readyState === "complete") { 
     init(); 
    } 
    }); 

</script> 
<h2>Hello World!</h2> 
<p id="myParagraph">This is an example website</p> 

<form> 
    <input type="text" id="myTextfield" placeholder="Type your name" /> 
    <input type="button" id="myButton" value="Go" /> 
</form>

Fiddle w - http://jsfiddle.net/poonia/qQMEg/4/

Źródło

2013-01-08 04:20:18

Myślę, że błąd, ponieważ elementy są niezdefiniowane, więc trzeba dodać window.onload wydarzenie, które to wydarzenie będzie zdefiniowany swoje elementy po załadowaniu okna.

window.addEventListener('load',Loaded,false); 


    function Loaded(){ 
    var myButton = document.getElementById("myButton"); 
    var myTextfield = document.getElementById("myTextfield"); 

    function greetUser(userName) { 
    var greeting = "Hello " + userName + "!"; 
    document.getElementsByTagName ("h2")[0].innerHTML = greeting; 
    } 

    myButton.onclick = function() { 
    var userName = myTextfield.value; 
    greetUser(userName); 

    return false; 
    } 
    }

Źródło

2013-01-08 04:31:08

JavaScript Błąd Null nie jest obiektem

Odpowiedz

Powiązane problemy