CODEWITHSUNDEEP
javascriptfunction
O. Dav
O. Dav

Reputation: 3

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

Upvotes: 0

Views: 820

Answers (3)

Vaibhav shetty
Vaibhav shetty

Reputation: 372

I think in that javascript function "calc()" you are holding value into this variable "resultat"

but in if condition , you are using "result" variable to check condition. div element is not getting displayed, as if condition is not satisfied.

Upvotes: 0

JRA
JRA

Reputation: 487

Your can use Jquery its very simple

Use this 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
    }

Upvotes: -1

mrid
mrid

Reputation: 5794

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>

Upvotes: 5

Related Questions