Question

我在Hackerrank上进行了JS的10天测试，而我停留在第9天，您必须按下一个按钮，每次按下它都会使按钮上的数字增加1。我已经编写了这段代码，但是似乎什么也没做。该按钮看起来不错，但是onclick无效。我也想做到这一点，而无需在html代码中的onclick =“ increment（）”一行中写点东西，因为我已经可以做到这一点。为了测试我的代码，我进入了w3schools.com，找到了一个随机测试，然后用我自己的代码替换了代码：

var btn = document.getElementById('btn');
var i = 0;

btn.onclick = function() {
  i++;
  btn.innerHTML = i;
};

.btnClass {
  width: 96px;
  height: 48px;
  font-size: 24px;
  background: #4FFF8F;
}

<h2>The Button Element</h2>
<button id="btn" class="btnClass">0</button>

Answer 1

如果您想将JS放在头部，也可以将它包装在window.onload中，以保持整洁。

<!DOCTYPE html>
<html>
<style>
.btnClass {
    width: 96px;
    height: 48px;
    font-size: 24px;
    background: #4FFF8F;
}
</style>

<script>
    window.onload = function() {    
        var btn = document.getElementById('btn');
        var i = 0;

        btn.onclick = function () {
            i++;
            btn.innerHTML = i;
        };
    }
</script>

<body>
<h2>The Button Element</h2>
<button id="btn" class="btnClass">0</button>
</body>
</html>

使用window.onload，您的js将“看到”您的按钮，因为页面已完全加载。

Answer 2

在按钮进入页面之前，将对JavaScript进行解析和执行。只需将脚本移动到按钮下方，或者甚至附加一个在页面加载后即可执行代码的地方。

您的HTML和脚本应如下所示：

<!DOCTYPE html>
<html>
<style>
.btnClass {
    width: 96px;
    height: 48px;
    font-size: 24px;
    background: #4FFF8F;
}
</style>
<body>

<h2>The Button Element</h2>
<button id="btn" class="btnClass">0</button>
<script>

    var btn = document.getElementById('btn');
    var i = 0;

    btn.onclick = function () {
        i++;
        btn.innerHTML = i;
    };


</script>
</body>
</html>

Answer 3

由于您将JS放在HTML之前，因此您的HTML已在之前被处理，因此HTML已被加载到DOM（文档对象模型）中。

您可以从Senad那里得到答案，但是...执行操纵DOM的Javascript的一种更安全的方法是等待DOM完全加载。

下面是一些代码，它通过侦听 DOMContentLoaded 事件来解决您的问题，并且无论您在何处加载Java脚本都可以使用。

document.addEventListener('DOMContentLoaded', function(){

console.log("DOM Loaded");

//Wait to add event listeners until the DOM is fully loaded. This is needed
// when wanting to access elements that are later in the HTML than the <script>.
  var btn = document.getElementById('btn');
  var i = 0;

  btn.addEventListener('click', function(el) {
      i++;
      btn.innerHTML = i;
      console.log("clicked")
  });

}）;

Answer 4

我看一下此链接：https://www.w3schools.com/jsref/event_onclick.asp

我认为按钮内部的ID应该是onclick事件。

希望这会有所帮助。

在JS中增加HTML按钮

4 个答案: