Question

当我运行此代码时，我在控制台中收到此错误

无法读取null
的属性'value'

正如您所看到的，txt1和txt2值不为空且javascript链接到HTML代码，我已使用音频文件对其进行了测试。

var audio = new Audio('sound/saw.mp3');
var min=0;
min=document.getElementById('txt1').value;
var max=0;
max=document.getElementById('txt2').value;

<label id="lbl1" for="txt1">lowest number </label>
<input id="txt1" type="text" class="enjoy" value="0">

<label id="lbl2" for="txt2">highest number </label>
<input id="txt2" type="text"  class="enjoy" value="100" />

Answer 1

这很可能是一个时间问题。 Javascript无法找到节点，直到它们被加载到dom中。只需将JS包装在window.onload()函数中：

window.onload = function(){
   var audio = new Audio('sound/saw.mp3');
   var min=0;
   min=document.getElementById('txt1').value;
   var max=0;
   max=document.getElementById('txt2').value;
}

这将确保在您尝试访问节点之前存在节点。您可以在此处阅读更多相关信息：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

Answer 2

标签中缺少/：

应该是：

如果您想要使用标签的内容：

的document.getElementById（ “TXT1”）。innerHTML的

如果你想要一个属性值，你必须使用

的document.getElementById（ “TXT1”）。的getAttribute（ “值”）

如果要访问文本字段的值，请使用：

的document.getElementById（ “TXT1”）。值

无论如何使用JQuery来导航DOM，它比DOM API容易得多。

JavaScript无法读取文本框值

2 个答案: