Question

1）为什么第一个按钮而不是第二个按钮显示在DOM上

2）对于第二个Button，我希望问候语首先显示在DOM上，然后向其中添加eventlistner。我该如何实现？

var greeting = "hi"
var greetingSpace = document.getElementById('exampleTwo');
greetingSpace.innerHTML = greeting;


document.getElementById('SecondButton').addEventListener('click', function() {
  greetingSpace.innerHTML = "hello";
})

<!-- button shows -->
<div id="exampleOne">
  <button id="firstButton"> First button </button>
</div>


<!-- Button doesn't show and the error says 'Cannot read property 'addEventListener' of null'-->
<div id="exampleTwo">
  <button id="SecondButton"> Second Button </button>
</div>

Answer 1

设置greetingSpace.innerHTML后，您将覆盖第二个按钮并将其从DOM中删除。

最简单的解决方案是将问候语绘制到单独的DOM元素中，而不是包含按钮的#exampleTwo：

var greeting = "hi"
var greetingSpace = document.getElementById('greetingSpace');
greetingSpace.innerHTML = greeting;


document.getElementById('SecondButton').addEventListener('click', function() {
  greetingSpace.innerHTML = "hello";
})

<div id="exampleOne">
  <button id="firstButton"> First button </button>
</div>

<div id="exampleTwo">
<div id="greetingSpace"></div>
  <button id="SecondButton"> Second Button </button>
</div>

Answer 2

在使用exampleTwo属性覆盖innerHTML元素的内容时，使用

greetingSpace.innerHTML = greeting;

因此，该按钮不再存在，导致您收到错误消息。为<div>创建另一个<span> / greetingSpace，您的按钮将开始显示

如何先添加innerhtml，然后将eventlistner添加到随后的元素

2 个答案: