javascript - document.ElementById 触发错误的对象

Question

我试图通过 JS 更改对象的类，以便我可以使用 onclick="document.getElementByID ..."更改 CSS 样式

<div class="box2"      onClick="document.getElementById('hidegetstartedcontainer').id = 'showgetstartedcontainer'; document.getElementById('pagecontainer-noblur').id = 'pagecontainer-blur'">
<span id=red>GET </span></br>
<span id=redbold>STARTED</span> 
</div>

<div class="box4" onClick="document.getElementById('hidegetintouchcontainer').id = 'showgetintouchcontainer'; document.getElementById('pagecontainer-noblur').id = 'pagecontainer-blur'">
<span id=redbold>GET IN TOUCH</span></br>
<span id=red>WITH US</span> 
</div>

触发上述内容确实按预期工作。现在在 showgetstartedcontainer 和 showgetintouchcontainer 中我有一个应该触发反向的关闭按钮:

<div id="hidegetstartedcontainer">
<div class="close1" onclick="document.getElementById('showgetstartedcontainer').id = 'hidegetstartedcontainer'; document.getElementById('pagecontainer-blur').id = 'pagecontainer-noblur'"></div>
</div>

<div id="hidegetintouchcontainer">
<div class="close2" onclick="document.getElementById('showgetintouchcontainer').id = 'hidegetintouchcontainer'; document.getElementById('pagecontainer-blur').id = 'pagecontainer-noblur'"></div>       
</div>

预期是:.close1 触发#showgetstartedcontainer.close2 触发#showgetintouchcontainer

结果是:.close1 触发#showgetintouchcontainer 以及 close2

由于从#showgetintouchcontainer 触发确实会发生，而不会首先触发其他方式，因此 showgetintouchcontainer 不存在，因此会出现错误“null is not an object”。

为什么 .close1 触发了错误的对象？感谢您的帮助。

干杯

Answer 1

id 在同一个文档中应该是唯一的，尝试用全局类替换重复的 id。

最好避免内联事件，而是在 js 中编写函数:

<div class="box2" onClick="document.getElementById('hidegetstartedcontainer').id = 'showgetstartedcontainer'; document.getElementById('pagecontainer-noblur').id = 'pagecontainer-blur'">
  <span class=red>GET </span><br/>
  <span class=redbold>STARTED</span> 
</div>

<div class="box4" onClick="document.getElementById('hidegetintouchcontainer').id = 'showgetintouchcontainer'; document.getElementById('pagecontainer-noblur').id = 'pagecontainer-blur'">
  <span class=redbold>GET IN TOUCH</span><br/>
  <span class=red>WITH US</span> 
</div>

注意:最好避免使用内联事件，而是在 js 中创建事件。

希望这对您有所帮助。