JavaScript, image doesn't appear

Question

I want to make an image appear in a div when it completes the if conditions but it doesn't works.

So where's the bug? Or how could the JS code work?

JSFiddle here: https://jsfiddle.net/wu6emhh7/29/

There's the code

<div class="row">
<div class="col-md-6">
    <h2>BMI Rechner</h2>
    <p>Ermitteln Sie Ihren BMI</p>
    <form id="bmiForm" name="bmiForm">
        <div>
            <label for="height"><strong>Gr&ouml;sse</strong>&nbsp;[cm]
                <input id="height" onkeyup="calculateBMI();" name="height" size="6" type="text" value="170" /> </label>
            <br />
            <label for="weight"><strong>Gewicht</strong>&nbsp;[kg]
                <input id="weight" onkeyup="calculateBMI();" name="weight" size="6" type="text" value="71" /> </label>
            <br />
            <input onclick="calculateBmi()" type="button" value="BMI berechnen" />
            <br /> <strong>Ihr BMI</strong>
            <input name="bmi" size="10" type="text" />
            <br /> <strong>Einteilung:</strong>
            <input name="meaning" size="20" type="text" />
            <br />
            <input type="reset" value="Zur&uuml;cksetzen" /> </div>
    </form>
</div>
<div class="contener">
    <div id="Empty1"></div>
    <div id="Empty2"></div>
    <div id="Empty3"></div>
    <div id="Empty4"></div>
</div>
<div class="contener2">
    <div class="subcontener1"> 18.5 </div>
    <div class="subcontener2"> 25 </div>
    <div class="subcontener3"> 30 </div>
</div>
<div class="contener">
    <div class="untergewicht"> Untergewicht </div>
    <div class="normalgewicht"> Normalgewicht </div>
    <div class="uebergewicht"> Übergewicht </div>
    <div class="adipositas"> Adipositas </div>
</div>

function calculateBmi() {
  var weight = document.bmiForm.weight.value
    var height = document.bmiForm.height.value
    if (weight > 0 && height > 0) {
      var finalBmi = Math.round((weight / (height / 100 * height / 100)) * 10) / 10;
      document.bmiForm.bmi.value = finalBmi;
      if (finalBmi < 18.4) {
        document.bmiForm.meaning.value = "Untergewicht";
        onload = function f() {
          document.getElementById("Empty1").innerHTML = '<img src="http://www.iconsdb.com/icons/preview/black/arrow-204-xxl.png"/>';
        }
      }
      if (finalBmi > 18.5 && finalBmi < 24.9) {
        document.bmiForm.meaning.value = "Normalgewicht, weiter so!"
        onload = function f() {
          document.getElementById("Empty2").innerHTML = '<img src="http://www.iconsdb.com/icons/preview/black/arrow-204-xxl.png"/>';
        };
      }
      if (finalBmi > 25 && finalBmi < 29.9) {
        document.bmiForm.meaning.value = "Übergewicht"
        onload = function f() {
          document.getElementById("Empty3").innerHTML = '<img src="http://www.iconsdb.com/icons/preview/black/arrow-204-xxl.png"/>';
        };
      }
      if (finalBmi > 30) {
        document.bmiForm.meaning.value = "Adipositas, lassen Sie sich professional beraten"
        onload = function f() {
          document.getElementById("Empty4").innerHTML = '<img src="http://www.iconsdb.com/icons/preview/black/arrow-204-xxl.png"/>';
        };
      }
    } else {
      alert("Bitte alles ausfüllen");
    }
}

What is `onload` supposed to be doing? The shown code never calls it, so of course it isn't doing anything. Since you never declared it I'm guessing you are trying to manipulate `window.onload`? Doing that will do nothing, the load `event` has already run when the page loaded, before you could enter anything into the form. When you reload the page the `load` event will be cleared and not run either. If you just remove the function and manipulate the element in the `if` body it will do what you appear to be trying to do. — Useless Code, May 08 '17 at 10:47

score 2 · Accepted Answer · edited May 23 '17 at 11:47

Just replace

onload = function f() {
  document.getElementById("Empty1").innerHTML = '...';
}

which basically adds a window.onload handler to an already loaded page with the following simple direct assignment

document.getElementById("Empty1").innerHTML = '...';

You might also want to consider preloading the images and using CSS in combination with dynamically selected (see element.classList) CSS classes to achieve the same effect without noticeable image loading delay.

score 1 · Answer 2 · answered May 08 '17 at 10:34

1

Yes, the onload function is wrong. In addition to what le_m said: you should assign the innerHTML stuff to an onclick function (for your button: BMI). There you should update your innerHTML, otherwise you will have multiple arrow images if you click multiple times with different values.

answered May 08 '17 at 10:34

Storm1337

23
8

Thx, but how? ^^' – Miguel May 08 '17 at 11:37
A very simple solution would be if you clear the innerHTML like: document.getElementById("Empty2").innerHTML = ""; document.getElementById("Empty3").innerHTML = ""; document.getElementById("Empty4").innerHTML = ""; document.getElementById("Empty1").innerHTML = ''; – Storm1337 May 08 '17 at 11:44

JavaScript, image doesn't appear

2 Answers2