Eigenschaftswert von 'null' kann nicht gelesen werden

Question

Ich versuche, die Variable userName beizubehalten den Wert von was auch immer in den Eingang eingegeben wird name_enter. Aber wenn ich versuche ich zu tun, damit nur die Konsole Fehler:

Uncaught Typeerror: kann Eigenschaft ‚Wert‘ von null

function questionName() { 
    document.write("<p>Hi my name is Bot9000. What is your name?</p><input type='text' id='name_enter' /><input type='button' value='Enter' onClick='verifyName();' />"); 
} 

var userName = document.getElementById("name_enter").value; 

function verifyName() { 
    document.write("<p>Your name is " + userName + "?</p>"); 
    document.write("<input type='button' value='Yes' onClick='nameVerified();' /> <input type='button' value='No' onClick='questionName();' />"); 
} 

function nameVerified() { 
    document.write("Nice to meet you " + userName + ". <br />Do you have any Hobbies?"); 
} 

Answer 1

Sie fragen nach dem Wert des Namens vor der Funktion gelesen questionName wird aufgerufen und fügt das Formular der Seite hinzu.

versuchen

function questionName() { 
    document.write("<p>Hi my name is Bot9000. What is your name?</p><input type='text' id='name_enter' /><input type='button' value='Enter' onClick='verifyName();' />"); 
} 



function verifyName() { 
    var userName = document.getElementById("name_enter").value; 
    document.write("<p>Your name is " + userName + "?</p>"); 
    document.write("<input type='button' value='Yes' onClick='nameVerified();' /> <input type='button' value='No' onClick='questionName();' />"); 
} 

function nameVerified() { 
    var userName = document.getElementById("name_enter").value; 
    document.write("Nice to meet you " + userName + ". <br />Do you have any Hobbies?"); 
} 

Answer 2

Dieser Fehler bedeutet das getElementById() Methode nicht das Element finden konnten Sie angegeben haben. Dies kann verursacht werden durch:

1. JS Code ausgeführt wurde, bevor das Element
2. Das Element erstellt wurde dosn't existieren.

In Ihrem Fall haben Sie das Problem # 1. Um dies zu beheben Ihre Funktion aufrufen, die das Element erstellt zunächst:

function questionName() { 
    document.write("<p>Hi my name is Bot9000. What is your name?</p><input type='text' id='name_enter' /><input type='button' value='Enter' onClick='verifyName();' />"); 
} 

function verifyName() { 
    document.write("<p>Your name is " + userName + "?</p>"); 
    document.write("<input type='button' value='Yes' onClick='nameVerified();' /> <input type='button' value='No' onClick='questionName();' />"); 
} 

function nameVerified() { 
    document.write("Nice to meet you " + userName + ". <br />Do you have any Hobbies?"); 
} 

questionName(); 
var userName = document.getElementById("name_enter").value; 

Answer 3

Das einzige Problem, das den Code haben kann, ist die Reihenfolge, in der die Funktionen ausgeführt werden. Um es sauber zu halten, speichern Sie einfach das Element in der Variablen und nicht den Wert. Wie

var userName = document.getElementById("name_enter");

Dann, wo immer Sie den Wert des Eingangs zugreifen möchten verwenden nur userName.value

---

auch Ihren Code ein wenig Refactoring.

function questionName() { 
    document.write("<p>Hi my name is Bot9000. What is your name?</p><input type='text' id='name_enter' /><input type='button' value='Enter' onClick='verifyName();' />"); 
} 

questionName() // execute this function so that the input element is added into the DOM 

var userName = document.getElementById("name_enter"); //just save the element because you haven't typed in any value into it so you will not get any value anyways at this moment. 

function verifyName() { 
    document.write("<p>Your name is " + userName.value + "?</p>"); 
    document.write("<input type='button' value='Yes' onClick='nameVerified();' /> <input type='button' value='No' onClick='questionName();' />"); 
} 

function nameVerified() { 
    document.write("Nice to meet you " + userName.value + ". <br />Do you have any Hobbies?"); 
}