Search code examples
javascriptonclickimagemap

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

Here's the CodePen

I'm trying to use super-primitive javascript to get an imagemap working. 

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>

The code is behaving differently in CodePen than it is when i test it in Chromium. In CodePen the text for redneck and redmidback is showing in the wrong place, in both places redmidback's text is placed inside the button instead of in the div.

I will learn to do this properly in due course but right now i just want to get this working. Hopefully i'm just making some simple mistake and i can indeed get this to work using this very basic code. Each onclick will have to call 13 functions by the time this is done. It worked for the first two. Am i missing some formatting or something?

Solution

  • The id = "redmidback" is both the id of the <button> (from which you call the function through onclick) and the <div> (where you want the innerHTML to be set). Since the <button> element comes before the <div> in your HTML, then the first one found is set.

    Always use unique id properties to avoid this kind of issues.