Making div appear depending on Javascript value

Question

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

can you show your html too please - we need to see the div that you are trying to show — Pete
– Pete, Commented Dec 1, 2016 at 9:06
HTML id should not start with a number: Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility. — Tigger
– Tigger, Commented Dec 1, 2016 at 9:10
ok your first problem is you have no element with an id of 500 — Pete
– Pete, Commented Dec 1, 2016 at 9:10

mrid · Accepted Answer · 2016-12-01 09:14:34Z

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>

Vaibhav shetty · Accepted Answer · 2016-12-01 09:16:50Z

0

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.

answered Dec 1, 2016 at 9:16

Vaibhav shetty

3721 gold badge4 silver badges16 bronze badges

Comments

JRA · Accepted Answer · 2016-12-01 09:15:38Z

-1

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
    }

answered Dec 1, 2016 at 9:15

JRA

4876 silver badges19 bronze badges

2 Comments

Pete Over a year ago

jQuery is not the answer for everything - why add a massive library just to show a div? This question isn't even tagged with jquery

Yan Mayatskiy Over a year ago

he didn't add the jquery tag, and its very simple to not require jquery for it.

Collectives™ on Stack Overflow

Making div appear depending on Javascript value

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related