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
– Useless Code, Commented May 8, 2017 at 10:47

Community · Accepted Answer · 2017-05-23 11:47:26Z

2

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.

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered May 8, 2017 at 10:29

le_m

20.4k10 gold badges70 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Storm1337 · Accepted Answer · 2017-05-08 10:34:41Z

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 8, 2017 at 10:34

Storm1337

238 bronze badges

2 Comments

Miguel Over a year ago

Thx, but how? ^^'

Storm1337 Over a year ago

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 = '<img src="iconsdb.com/icons/preview/black/arrow-204-xxl.png">';

Collectives™ on Stack Overflow

JavaScript, image doesn't appear

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related