JavaScript，圖像不會出現

我想使圖像出現在div，當它完成if條件但它不起作用。JavaScript，圖像不會出現

那麼錯誤在哪裏呢？或者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"); 
    } 
}

來源

2017-05-08 Miguel

'onload'應該做什麼？顯示的代碼從來沒有調用它，所以當然它沒有做任何事情。既然你從來沒有宣佈它，我猜你正試圖操縱'window.onload'？這樣做什麼都不做，負載'事件'已經在頁面加載時運行，然後你可以在表單中輸入任何內容。當您重新加載頁面時，'load'事件將被清除並且不會運行。如果你只是刪除函數並操作'if'主體中的元素，它將會執行你似乎正在嘗試做的事情。 –

只需更換

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

基本上增加了一個window.onload handler到已加載的頁面下面的簡單直接分配

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

你可能也想用動態選擇的考慮preloading the images and using CSS組合（見element.classList）CSS類實現沒有明顯的效果相同圖像加載延遲。

來源

2017-05-08 10:29:30

是的，onload函數是錯誤的。除了le_m所說的：你應該將innerHTML的東西分配給一個onclick函數（對於你的按鈕：BMI）。在那裏你應該更新你的innerHTML，否則如果你用不同的值單擊多次，你將會有多個箭頭圖像。

來源

2017-05-08 10:34:41 Storm1337

Thx，但是如何？ ^^' – Miguel

一個非常簡單的解決方案是，如果您清除innerHTML，例如： document.getElementById（「Empty2」）。innerHTML =「」; document.getElementById（「Empty3」）。innerHTML =「」; document.getElementById（「Empty4」）。innerHTML =「」; document.getElementById（「Empty1」）。innerHTML =''; – Storm1337

JavaScript，圖像不會出現

回答

相關問題