Question

这是我的错误：

用户ATSC（127.0.0.1）的客户端javascript错误详细信息：TypeError：无法读取null
的属性“value”

我在以下代码中收到此错误：

var htmlmessage =    
    <p><strong>Vul de volgende gegevens in om het inplannen af te ronden:</strong></p>
    <p>
     <form>
      <strong>Aantal in te plannen medewerkers: </strong><br>
        <input type='number' name='medewerkers' id='aantmdw' value='1'></input>
    </p>
    <p>
      <strong>Aantal in te plannen machines: </strong><br>
        <input type='number' name='machines' id='aantmch' value='1'></input>
     </form>
    </p>;

var mdwCount = document.getElementById("aantmdw").value;
var mchCount = document.getElementById("aantmch").value;

如您所见，它已保存到JavaScript变量中。如何从表单中获取值以使用它，而不是null？

Answer 1

您不能在JavaScript字符串文字中添加换行符

如果您的代码实际上是

var htmlmessage = <p><strong>Vul de volgende gegevens in om het inplannen af te ronden:</strong></p>
<p>
 <form>
  <strong>Aantal in te plannen medewerkers: </strong><br>
    <input type='number' name='medewerkers' id='aantmdw' value='1'></input>
</p>
<p>
  <strong>Aantal in te plannen machines: </strong><br>
    <input type='number' name='machines' id='aantmch' value='1'></input>
 </form>
</p>

然后您需要将其更改为

var htmlmessage = '<p><strong>Vul de volgende gegevens in om het inplannen af te ronden:</strong></p>'+
'<p>'+
' <form>'+
'  <strong>Aantal in te plannen medewerkers: </strong><br>'+
'    <input type="number" name="medewerkers" id="aantmdw" value="1"></input>'+
'</p>'+
'<p>'+
'  <strong>Aantal in te plannen machines: </strong><br>'+
'    <input type="number" name="machines" id="aantmch" value="1"></input>'+
' </form>'+
'</p>';

观看引号

或者您可以使用ES6 template literals

var htmlmessage = `<p><strong>Vul de volgende gegevens in om het inplannen af te ronden:</strong></p>
<p>
 <form>
  <strong>Aantal in te plannen medewerkers: </strong><br>
    <input type='number' name='medewerkers' id='aantmdw' value='1'></input>
</p>
<p>
  <strong>Aantal in te plannen machines: </strong><br>
    <input type='number' name='machines' id='aantmch' value='1'></input>
 </form>
</p>`

使用HTML更新DOM后，您可以使用

var mdwCount = document.getElementById("aantmdw").value;
var mchCount = document.getElementById("aantmch").value;

Answer 2

添加 @mplungjan 提到的引号中的html消息内容。

在获取dom元素之前，在文档中插入 htmlmessage ，

因为您尚未在文档中插入 htmlmessage ，并且在获取任何 document.getElementById（“someId”）之前，只有在dom“dom”时才会有效someId“出现在文件中。

javascript变量中的html给出null错误

2 个答案: