machen div erscheinen abhängig von Javascript Wert

Question

Hallo ich diesen Rechner erstellt haben:

HTML:

<form> 
    <p> Boligens byggeår 
     <select id="alder" name="alder"> 
       <option value="70">Før 1960</option> 
       <option value="55">1961-1980</option> 
       <option value="40">1981-2000</option> 
      <option value="30">2001 og efter</option> 
      </select></p> 
      <br><br> 
<p>Antal m2 
<input type="text" id="m2"/></p> 
<br><br> 
    <p>Åbenhed 
     <select id="aabenhed" name="aabenhed"> 
       <option value="0.70">Åben</option> 
       <option value="0.50">Mellem</option> 
      <option value="0.30">Lukket</option> 
      </select></p> 

<br><br> 

    <input type="button" onClick="calc();" value="Beregn" /> 
    </form> 
    <div id="result"></div> 

<div id="500" style="display:none;">explanatory text 1</div> 

Javascript:

function calc(){ 
var alder=document.getElementById('alder').value; 
var m2=document.getElementById('m2').value; 
var aabenhed=document.getElementById('aabenhed').value; 
var resultat=alder*m2*aabenhed/1000; 
document.getElementById('result').innerHTML=resultat; 
return false 
}; 

Und jetzt will ich ein div erscheinen lassen, je nach das Ergebnis. Ich habe bereits versucht, so etwas wie dies zu tun:

if (result <= 500) { 
    document.getElementById('500').style.display = "block";} 

Aber das funktioniert nicht, so bin ich fest, wie es zu tun. Danke

Answer 1

Ist das was du willst ??

function calc(){ 
 
var alder=document.getElementById('alder').value; 
 
var m2=document.getElementById('m2').value; 
 
var aabenhed=document.getElementById('aabenhed').value; 
 
var resultat=alder*m2*aabenhed/1000; 
 
document.getElementById('result').innerHTML=resultat; 
 
if (resultat <= 500) { 
 
    document.getElementById('500').style.display = "block";} 
 
    else{ 
 
    document.getElementById('500').style.display = "none";} 
 
    
 
return false 
 
};

<form> 
 
    <p> Boligens byggeår 
 
     <select id="alder" name="alder"> 
 
       <option value="70">Før 1960</option> 
 
       <option value="55">1961-1980</option> 
 
       <option value="40">1981-2000</option> 
 
      <option value="30">2001 og efter</option> 
 
      </select></p> 
 
      <br><br> 
 
<p>Antal m2 
 
<input type="text" id="m2"/></p> 
 
<br><br> 
 
    <p>Åbenhed 
 
     <select id="aabenhed" name="aabenhed"> 
 
       <option value="0.70">Åben</option> 
 
       <option value="0.50">Mellem</option> 
 
      <option value="0.30">Lukket</option> 
 
      </select></p> 
 

 
<br><br> 
 

 
    <input type="button" onClick="calc();" value="Beregn" /> 
 
    </form> 
 
    <div id="result"></div> 
 

 
<div id="500" style="display:none;">explanatory text 1</div>

Answer 2

Sie können JQuery seine sehr einfache

verwenden

verwenden CDN Link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    if (result <= 500) { 
     $('#div Id').show(); // replace div Id with your div id 
    } 

Answer 3

denke ich, in die JavaScript-Funktion "calc()" Sie halten Wert in diese Variable "resultat"

aber in der Bedingung if verwenden Sie die Variable "result", um die Bedingung zu überprüfen. div-Element wird nicht angezeigt, als wäre die Bedingung nicht erfüllt.