JavaScript，图片不会出现 [英] JavaScript, image doesn't appear

问题描述

我想在完成 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： https://jsfiddle.net/wu6emhh7/29/

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 = '...';
}

基本上添加 window.onload 处理程序到已加载的页面，具有以下简单的直接赋值

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

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

您可能还想考虑预装图像并使用CSS 结合动态选择（参见 element.classList ）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，图片不会出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！