JavaScript，图片不会出现

问题描述

我想在完成 if 条件时图片显示在div 中，但它不起作用。

I want to make an image appear in a div when it completes the if conditions but it doesn't works.

那么错误在哪里？或者JS代码如何工作？

So where's the bug? Or how could the JS code work?

JSFiddle：

JSFiddle here: 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");
    }
}

推荐答案

替换

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

基本上添加到已加载的页面，具有以下简单的直接赋值

which basically adds a window.onload handler to an already loaded page with the following simple direct assignment

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

您可能还想考虑结合动态选择（参见）CSS类实现相同的效果而不引人注意图像加载延迟。

You might also want to consider preloading the images and using CSS in combination with dynamically selected (see element.classList) CSS classes to achieve the same effect without noticeable image loading delay.

这篇关于JavaScript，图片不会出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！