Question

我正在尝试使变量 userName 保留输入 name_enter 中输入内容的值。但是当我尝试这样做时，我只是得到了控制台错误：

未捕获的TypeError：无法读取属性＆＃39;值＆＃39;为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

在调用函数questionName之前，您要求输入name的值，并将表单添加到页面中。

试

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

该错误表示getElementById()方法无法找到您指定的元素。这可能是由以下原因引起的：

JS代码在创建元素之前执行
元素存在。

在你的情况下你有问题＃1。要解决此问题，请先调用创建元素的函数：

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

您的代码可以拥有的唯一问题是函数的执行顺序。所以要清理它只是将元素保存到变量而不是值。像

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

然后，只要您想要访问输入值，只需使用userName.value

还要重构一下你的代码。

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?");
}

物业价值＆＃39; null＆＃39;无法阅读

3 个答案: