lundi 8 mai 2017

javascript, image doesn't appear

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

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

JSFiddle here: http://ift.tt/2qgLuJT

There's the code

<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://ift.tt/2qRNoO5"/>'; }
        }
        if (finalBmi > 18.5 && finalBmi < 24.9) {
            document.bmiForm.meaning.value = "Normalgewicht, weiter so!"
            onload = function f()
    { document.getElementById("Empty2").innerHTML = '<img src="http://ift.tt/2qRNoO5"/>'; }
        }
        if (finalBmi > 25 && finalBmi < 29.9) {
            document.bmiForm.meaning.value = "Übergewicht"
            onload = function f()
    { document.getElementById("Empty3").innerHTML = '<img src="http://ift.tt/2qRNoO5"/>'; }
        }
        if (finalBmi > 30) {
            document.bmiForm.meaning.value = "Adipositas, lassen Sie sich professional beraten"
            onload = function f()
    { document.getElementById("Empty4").innerHTML = '<img src="http://ift.tt/2qRNoO5"/>'; }
        }
    }
    else {
        alert("Bitte alles ausfüllen")
    }
}

Thank's

Aucun commentaire:

Enregistrer un commentaire