javascript - 为什么 onclick 不将文本放入 div 中？

Question

这是CodePen

我正在尝试使用超原始 javascript 来使图像映射正常工作。

function redjawtext() {
  document.getElementById("redjaw").innerHTML = "Jaw";
}

function redjawclear() {
  document.getElementById("redjaw").innerHTML = "";
}

function rednecktext() {
  document.getElementById("redneck").innerHTML = "Neck";
}

function redneckclear() {
  document.getElementById("redneck").innerHTML = "";
}

function redmidbacktext() {
  document.getElementById("redmidback").innerHTML = "Mid back";
}

function redmidbackclear() {
  document.getElementById("redmidback").innerHTML = "";
}

<div style="background: transparent url(http://www.briligg.com/images/posture600.png) no-repeat; display: block; 
    min-height: 413px; min-width: 550px; position: absolute; top: 50px;" width="550" height="413">
  /*red jaw*/
  <button type="button" class="map" style="width: 48px; height: 48px;  top: 97px; left: 84px;" onclick="redjawtext(); redneckclear(); redmidbackclear();">
    &nbsp;
  </button>
  /*red neck*/
  <button type="button" class="map" onclick="rednecktext(); redjawclear(); redmidbackclear();" style="width: 48px; height: 48px; top: 102px; left: 32px;">&nbsp;</button>
  /*red midback*/
  <button type="button" id="redmidback" class="map" onclick="redmidbacktext(); redneckclear(); redjawclear();" style="width: 48px; height: 57px; top: 152px; left: 0px;">&nbsp;</button>
  <div id="redjaw" class="posture"></div>
  <div id="redneck" class="posture"></div>
  <div id="redmidback" class="posture"></div>
</div>

代码在 CodePen 中的行为与我在 Chromium 中测试时的行为不同。在 CodePen 中，redneck 和 redmidback 的文本显示在错误的位置，在这两个地方，redmidback 的文本都放置在按钮内而不是 div 中。

我会在适当的时候学会正确地做到这一点，但现在我只想让它工作。希望我只是犯了一些简单的错误，并且我确实可以使用这个非常基本的代码来使其工作。完成此操作后，每次 onclick 都必须调用 13 个函数。它对前两个有效。我是否缺少某些格式或其他内容？

Answer 1

id = "redmidback"都是 id <button>的(通过 onclick 调用该函数)和 <div> (您希望在其中设置 innerHTML)。自 <button>元素位于 <div> 之前在您的 HTML 中，然后设置找到的第一个。

始终使用唯一的id属性来避免此类问题。