Question

我正在尝试使用超级原始的javascript来运行imagemap。

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的{{1}}（通过<button>从中调用函数），也是onclick（你想要的地方）要设置<div>）。由于innerHTML元素位于HTML中的<button>之前，因此找到了第一个元素。

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

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

1 个答案: