JavaScript, Bild erscheint nicht

Question

Ich möchte ein Bild in einem div erscheinen, wenn es die if Bedingungen erfüllt, aber es funktioniert nicht.

Also wo ist der Fehler? Oder wie könnte der JS-Code funktionieren?

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

Es ist der 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"); 
    } 
} 

Answer 1

Ersetzen Sie einfach

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

, die im Grunde ein window.onload handler zu einer bereits geladenen Seite mit der folgenden einfachen direkten Zuordnung fügt

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

Sie auch mit (siehe element.classList) CSS-Klassen dynamisch ausgewählt betrachten preloading the images and using CSS in Kombination mögen vielleicht die gleiche Wirkung ohne merk zu erreichen Bildladeverzögerung.

Answer 2

Ja, die Onload-Funktion ist falsch. Zusätzlich zu dem, was le_m sagte: Sie sollten den innerHTML-Code einer Onclick-Funktion zuweisen (für Ihren Button: BMI). Dort solltest du dein innerHTML aktualisieren, sonst hast du mehrere Pfeilbilder, wenn du mehrfach mit anderen Werten klickst.