O. Dav O. Dav - 2 days ago 5
Javascript Question

Making div appear depending on Javascript value

Hi i have created this calculator:

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
};


And now i want to make a div appear depending on the result.
I already tried doing something like this:

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


But that does not work, so i'm stuck about how to do it.
Thanks

Answer

Is this what you want ??

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>

Comments