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 类相结合，以达到相同的效果，而不会出现明显的图像加载延迟。