JavaScript，图像不会出现

Question

我想使图像出现在div，当它完成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 = '...'; 
} 

基本上增加了一个window.onload handler到已加载的页面下面的简单直接分配

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

你可能也想用动态选择的考虑preloading the images and using CSS组合（见element.classList）CSS类实现没有明显的效果相同图像加载延迟。

Answer 2

是的，onload函数是错误的。除了le_m所说的：你应该将innerHTML的东西分配给一个onclick函数（对于你的按钮：BMI）。在那里你应该更新你的innerHTML，否则如果你用不同的值单击多次，你将会有多个箭头图像。