为什么 onclick 不将文本放在 div 中？

Question

我正在尝试使用超原始 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" 既是 <button> 的 id（您通过 onclick 从中调用函数），也是 <div>（您从中调用函数的地方）想要设置 innerHTML）。由于 <button> 元素出现在 HTML 中的 <div> 之前，因此设置第一个找到的元素。

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

为什么 onclick 不将文本放在 div 中？

Why isn't onclick placing the text in the div?

javascript

onclick

imagemap