Question

我有以下html / JS代码：

string remove_non_alpha(string mystring)
{
    string ret_string = "";
    for (int i = 0; i < mystring.length(); i++)
    {
        if (isalpha(mystring[i]))
        {
            ret_string += tolower(mystring[i]);
        }
    }

    return ret_string;
}

function controller()
{
    document.write(document.getElementById("name").value)   ;
    document.write(document.getElementById("id").value) ;
}

问题：当我点击按钮<input type="text" id="name"/> <input type="text" id="id"/> <input type="button" id="push" onclick="controller()"/>时会被触发并执行onclick功能，我可以检索ID为controller的元素的值但是没有读取具有id name的第二个元素，因此我得到第二个输入元素的以下错误：

未捕获的TypeError：无法读取属性＆＃39;值＆＃39;为null

我一直在苦苦挣扎几个小时但是我无法理解我在哪里犯错会有人帮忙吗？

Answer 1

您的脚本正确读取输入值，但是当第一个document.write语句执行时它将覆盖正文，因此当脚本尝试执行第二个时，它将找不到输入并返回错误行：

未捕获的TypeError：无法读取属性＆＃39;值＆＃39;为null

希望这有帮助。

＆＃13;

function controller()
{
  console.log(document.getElementById("name").value);
  console.log(document.getElementById("id").value);
}

＆＃13;

<input type="text" id="name"/>
<input type="text" id="id"/>
<input type="button" id="push" onclick="controller()"/>

＆＃13;

Answer 2

问题在于document.write是＆＃34;清算＆＃34;这页纸。在第一个document.write之后，页面上的输入不再是<{1}}

详细信息可在此链接https://developer.mozilla.org/en-US/docs/Web/API/Document/write

下的MDN上找到

哪个州：

注意：当 document.write 写入文档流时，调用关闭（加载）文档上的document.write会自动调用 document.open，它将清除文档

请改为alert()或console.info()或其他不清除文档的功能。

＆＃13;

function controller()
{
    alert(document.getElementById("name").value)   ;
    alert(document.getElementById("id").value) ;
}

＆＃13;

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="ISO-8859-1">
            <title>Insert title here</title>
        </head>
        <body>
            <input type="text" id="name"/>
            <input type="text" id="id"/>
            <input type="button" id="push" onclick="controller()"/>
        </body>
    </html>

＆＃13;

使用chrome 51 +在Win7上测试

可选

如果您想/必须使用document.write，请首先阅读所有值并将其写入文档。

＆＃13;
＆＃13;
function controller() { var firstField = document.getElementById("name").value; var secondField = document.getElementById("id").value; document.write(firstField); document.write(secondField); }
＆＃13;
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> </head> <body> <input type="text" id="name"/> <input type="text" id="id"/> <input type="button" id="push" onclick="controller()"/> </body> </html>
＆＃13;
＆＃13;
＆＃13;

使用chrome 51+在Win7上测试

信息： 附加事件的更好方法是将它们附加到 Eventlistener是addEventListener参考的链接 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 3

问题是document.write擦除了主体，你可以改为使用'alert（）'或者将另一个元素添加到dom并将其innerHTML设置为值：

 function controller(){
  alert(document.getElementById("name").value)   ;
  alert(document.getElementById("id").value) ;
}

OR

<input type="text" id="name"/>
<input type="text" id="id"/>
<input type="button" id="push" onclick="controller()"/>
<div id="result"></div>

的javascript

var ele=document.querySelector("#result");
function controller(){
  ele.innerHTML="Name :"+document.getElementById("name").value+"<br>Id: "+document.getElementById("id").value;
}

Answer 4

<div ng-repeat="item in list | filter: 2: true"> <div>{{item}}</div> </div>正在替换整个dom，因此后续的document.write(document.getElementById("name").value);无法检索输入值。在将所有值写回文档之前存储它们。

getElementById

无法读取输入DOM元素的值

4 个答案: