Question

我在以下java脚本的问题标题中提到了错误：

var button = document.getElementById('button');
button.addEventListener('click', buttonAction);

function buttonAction(){
    var box = document.getElementById('Box');
    box.value = "show this";
}

脚本中的按钮和文本框reefer to在链接的html文档中声明为：

<button id="button">button</button> <br> 
<label>Input Box:</label> 
<input type="text" name="" placeholder="enter text" id="box"> <br>

一如既往，感谢所提供的任何帮助。

Answer 1

正如@Xufox所强调的那样，由于在页面中的HTML之前包含了您的脚本，因此您在帖子中提到的原始错误可能会发生。确保您的脚本在HTML之后运行以缓解该错误。

但除此之外，您的代码还有一个问题是语句document.getElementById('Box')返回null。

JavaScript是一种区分大小写的语言。输入框的ID为box，而您提供了Box（请注意首都B）。更正此错误，您的代码工作正常。请参阅下面的演示：

＆＃13;

var button = document.getElementById('button');
button.addEventListener('click', buttonAction);

function buttonAction() {
  var box = document.getElementById('box');
  box.value = "show this";
}

＆＃13;

<button id="button">button</button> <br>
<label>Input Box:</label>
<input type="text" name="" placeholder="enter text" id="box"> <br>

＆＃13;

Answer 2

在提供的答案的帮助下，我已经解决了这个问题。首先，如上所述，由于id的名称都是小写的，因此应该在脚本中调用它。所以我改变了

var box = document.getElementById('Box');

到

var box = document.getElementById('box');

更改是来自＆＃39; Box＆＃39;到＆＃39;框＆＃39;。

但这并没有解决问题;我还是得到了错误。我现在已经知道这发生了，因为我的语句将我的java脚本链接到我的html文档的html头部的html文档，而不是在html主体的末尾。将语句放在html头部会导致java脚本在html文档知道＆＃34;按钮之前加载。对象（在它到达之前）。所以当我在我的java脚本中调用一个按钮时，程序（我认为这就是他们所谓的DOM），正在响应：＆＃34;什么按钮？我不知道任何按钮。＆＃34;所以，为了避免这种情况，我加载了我的语句，将我的html文档链接到html正文结束时的java脚本。现在，当我在我的java脚本中调用我的html文档中的对象时，程序知道我在说什么，它运行得很好。

Answer 3

＆＃13;

var button = document.getElementById('button');
button.addEventListener('click', buttonAction);

function buttonAction(){
    var box = document.getElementById('box');
    box.value = "show this";
}

＆＃13;

<button id="button">button</button> <br> 
<label>Input Box:</label> 
<input type="text" name="" placeholder="enter text" id="box"> <br>

＆＃13;

您有写错误，您的元素ID是＆＃34; box＆＃34;不是＆＃34; Box＆＃34;，你得到一个错误因为javascript是区分大小写的，对于带有id＆＃34; Box＆＃34;的javascript元素不存在。

var box = document.getElementById('box');

我在java脚本上得到一个“未捕获的TypeError：无法读取属性'addEventListener'的null”

3 个答案: