JavaScriptが表示されません

Question

イメージはのifの条件を完了すると表示されますが、動作しません。

だからバグはどこですか？ JSコードはどのように動作するのですか？ここ

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

コード

<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

がありますだけで

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

を置き換えます基本的に

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

あなたはまた、動的に選択と組み合わせてpreloading the images and using CSSを検討する必要があります以下の簡単な直接割り当てと、すでにロードされたページへwindow.onload handlerを追加210

目立つことなく、同じ効果を達成するためのCSSクラス（element.classListを参照してください）画像読み込み遅延。

Answer 2

はい、onload関数が間違っています。 le_mが言ったことに加えて：あなたはonclick関数（あなたのボタンのために：BMI）にinnerHTMLのものを割り当てるべきです。ここでinnerHTMLを更新する必要があります。そうしないと、異なる値で複数回クリックすると複数の矢印イメージが表示されます。