How to calculate totals based on current state of divs

Question

What I have is a house plan that had javascript overlaid divs.

I want to create a function that calculates figures based on whether these div ids are displayed or not and then return that answer.

Here is the JSFiddle https://jsfiddle.net/offtkdqk/

function calculate_total(ppa, cpa, cpo, gar) {
    var tot_price = 279500;
    var a = document.getElementById(ppa);
    if (a.style.display == 'block') var ppa_tot = 1000;
    var b = document.getElementById(cpa);
    if (b.style.display == 'block') var cpa_tot = 5000;
    var c = document.getElementById(cpo);
    if (c.style.display == 'block') var cpo_tot = 6000;
    var d = document.getElementById(gar);
    if (d.style.display == 'block') var gar_tot = 9000;
    var estimate = tot_price + ppa_tot + cpa_tot + cpo_tot + gar_tot;
    return estimate();
}

And the HTML:

<div id="main-bg" class="main-img">
    <img src="images/house.jpg" width="100%">
</div>
<div id="main-ppa" class="main-img">
    <img src="images/house-paved-patio.png" width="100%">
</div>
<div id="main-gar" class="main-img">
    <img src="images/house-garage.png" width="100%">
</div>
<div id="main-cpo" class="main-img">
    <img src="images/house-covered-porch.png" width="100%">
</div>
<div id="main-cpa" class="main-img">
    <img src="images/house-covered-patio.png" width="100%">
</div>
<div id="estimate"></div>
<script>
    document.getElementById("estimate").innerHTML = "Your estimated total is $" + calculate_total('main-ppa', 'main-cpa', 'main-cpo', 'main-gar');
</script>

With the CSS something like:

#main-ppa {display:none;}
#main-gar {display:block;}
#main-cpo {display:block;}
#main-cpa {display:none;}

Any help would be greatly appreciated.

I think I see the issue. You are checking the `style` property of the element, but you are not setting it. JS does not go down into the CSS file to see if your CSS class is setting the display property. — jwatts1980, Apr 14 '15 at 20:04
Sorry, I am setting the styles with the javascript so it is finding and editing the styles in that step. However. It is not even giving me the printed part of the return "Your estimated total is: $" — Lee Gellie, Apr 14 '15 at 20:10
@LeeGellie, are you open to using jQuery? That would make this a lot easier. — , Apr 14 '15 at 20:13

brain_bacon · Answer 1 · 2015-04-14T20:59:01.020

1

I updated your fiddle to a working example.

function getDisplay(id) {
    var element = document.getElementById(id);
    return element.currentStyle 
            ? element.currentStyle.display
            : getComputedStyle(element, null).display;
}

function calculate_total(ppa, cpa, cpo, gar) {
    var estimate = 279500;
    if(getDisplay(ppa) !== 'none') {
        estimate += 1000;
    }
    if(getDisplay(cpa) !== 'none') {
        estimate += 5000;
    }
    if(getDisplay(cpo).display !== 'none') {
        estimate += 6000;
    }
    if(getDisplay(gar) !== 'none') {
        estimate += 9000;
    }
    return estimate;
}

document.getElementById("estimate").innerHTML = "Your estimated total is $" + calculate_total('main-ppa', 'main-cpa', 'main-cpo', 'main-gar');

The major issues were that your scripts were separated and you were running return estimate() when estimate is a value and not a function.

I did some minor code improvements, but it could still go a long way to becoming clearer and cleaner.

edited Apr 14 '15 at 20:59

answered Apr 14 '15 at 20:19

brain_bacon

1,120
11
16

Thank you. I am still having a problem getting the calculation to total with the added value for the displayed divs. – Lee Gellie Apr 14 '15 at 20:31
I updated the link and the fiddle. @jwatts1980 suggested that the style information was not available because it is in CSS and not inline. I added getComputedStyle as suggested by [this stackoverflow answer](http://stackoverflow.com/a/4866283/2619800) – brain_bacon Apr 14 '15 at 20:39
one last edit. I changed it so it's instead `!== 'none'` as there are different display types available in CSS. – brain_bacon Apr 14 '15 at 20:43

score 1 · Accepted Answer · answered Apr 14 '15 at 20:29

check this fiddle https://jsfiddle.net/c89rwy8y/1/

I changed @brain_bacon answer a little bit to get the computed style

function calculate_total(ppa, cpa, cpo, gar) {
    var estimate = 0;
    if (getDisplay(document.getElementById(ppa)) == 'block') {
        estimate += 1000;
    }
    if (getDisplay(document.getElementById(cpa)) == 'block') {
        estimate += 5000;
    }
    if (getDisplay(document.getElementById(cpo)) == 'block') {
        estimate += 6000;
    }
    if (getDisplay(document.getElementById(gar)) == 'block') {
        estimate += 9000;
    }
    return estimate;
}

function getDisplay(element)
{
    return element.currentStyle ? element.currentStyle.display :
                          getComputedStyle(element, null).display;
}

document.getElementById("estimate").innerHTML = "Your estimated total is $" + calculate_total('main-ppa', 'main-cpa', 'main-cpo', 'main-gar');

you can check the limitation of getComputedStyle HERE

I think I missed your answer while I was editing my fiddle to use getComputedStyle :) — brain_bacon, Apr 14 '15 at 20:52

score 0 · Answer 3 · answered Apr 14 '15 at 20:06

0

Try something like this:

function calculate_total(ppa, cpa, cpo, gar) {
    var a = document.getElementById(ppa);
    var b = document.getElementById(cpa);
    var c = document.getElementById(cpo);
    var d = document.getElementById(gar);
    var estimate = 0;

    if (a.style.display == 'block') estimate += 1000;
    if (b.style.display == 'block') estimate += 5000;
    if (c.style.display == 'block') estimate += 6000;
    if (d.style.display == 'block') estimate += 9000;

    return estimate;
}

answered Apr 14 '15 at 20:06

1

This will not work. The `element.style.display` property only look at the `
` attribute of the element. The `display` property is being set by the CSS class and `style.display` will not be available.
– jwatts1980 Apr 14 '15 at 20:07
You're right. I'll edit my answer accordingly if OP can use jQuery. – Apr 14 '15 at 20:13
So do I need to change them to have the style in the HTML rather than a stylesheet? – Lee Gellie Apr 14 '15 at 20:15
@LeeGellie I posted an answer with my comments on this. – jwatts1980 Apr 14 '15 at 20:19
ALMOST!!! It is not giving me the block. I just need to get it adding the amounts when the divs are displayed as "block" which it still isn't doing. – Lee Gellie Apr 14 '15 at 20:22
You'll need to combine my answer with jwatts to get a full answer. I didn't notice the style issue. – Apr 14 '15 at 20:24

score 0 · Answer 4 · answered Apr 14 '15 at 20:14

There are lots of issues with your code. First the function needs to be available before it is called. So you will need to the setting underneath jQuery in the top left to No wrap - in <head>. And then there your code is has lots of issues. You need to understand hoisting and the correct syntax using native JavaScript to check if a element is visible. Here's the updated code:

function calculate_total(ppa, cpa, cpo, gar) {
    var tot_price = 279500;
    var ppa_tot = 0;
    var cpa_tot = 0;
    var cpo_tot = 0;
    var gar_tot = 0;
    var a = document.getElementById(ppa);
    if (a.offsetParent!=null) ppa_tot = 1000;
    var b = document.getElementById(cpa);    
    if (b.offsetParent!=null) cpa_tot = 5000;
    var c = document.getElementById(cpo);
    if (c.offsetParent!=null) cpo_tot = 6000;
    var d = document.getElementById(gar);
    if (d.offsetParent!=null) gar_tot = 9000;

    var estimate = tot_price + ppa_tot + cpa_tot + cpo_tot + gar_tot;
    return estimate;
}

estimate is not a functions so you shouldn't be returning estimate();

score 0 · Answer 5 · edited May 23 '17 at 12:08

0

The element.style.display property looks at the style HTML attribute. Like this:

<div id="test" style="display:none;">

So

alert(document.getElementById("test").style.display);

will alert none.

But when the display style is being set by the CSS file like you are doing, it will alert either undefined or an empty string.

Being able to tell for sure whether an element is actually showing is more complicated. See this SO answer: Check if element is visible in DOM

If this is a simple application you are doing, then setting the style attribute may be the easiest. Another way would be to put in a checkbox, and read whether it is checked or not.

edited May 23 '17 at 12:08

Community

1
1

answered Apr 14 '15 at 20:19

jwatts1980

7,254
2
28
44

Thanks. I have corrected that. It is now showing me the original figure but no increase for the divs that are displayed as "block" – Lee Gellie Apr 14 '15 at 20:32
Is there a way to have the _calculate_total recalculate once I have changed the state of a div with a javascript onClick button? – Lee Gellie Apr 14 '15 at 20:33
@LeeGellie I think Amy's answer was more complete with regard to the mathematical corrections. I just wanted to make sure that you understood how the `element.style` property worked, and it was too long for a comment. – jwatts1980 Apr 14 '15 at 20:35
@LeeGellie It looks like this function will be reuseable. I think you should be able to call it as many times as needed. – jwatts1980 Apr 14 '15 at 20:36
I added the "document.getElementById("estimate").innerHTML = "Your estimated total is $"+calculate_total('main-ppa','main-cpa','main-cpo','main-gar');" To the end of the functions on my buttons to change div states and it works perfectly!! – Lee Gellie Apr 14 '15 at 20:42

score 0 · Answer 6 · answered Apr 14 '15 at 20:19

Try changing your javascript to this:

function calculate_total(ppa, cpa, cpo, gar) {
 var tot_price = 279500;
 var a = document.getElementById(ppa);
 if (a.style.display == 'block') var ppa_tot = 1000;
 var b = document.getElementById(cpa);
 if (b.style.display == 'block') var cpa_tot = 5000;
 var c = document.getElementById(cpo);
 if (c.style.display == 'block') var cpo_tot = 6000;
 var d = document.getElementById(gar);
 if (d.style.display == 'block') var gar_tot = 9000;
 var estimate = tot_price + ppa_tot + cpa_tot + cpo_tot + gar_tot;
 return estimate;
}

And your html to this:

<div id="main-bg" class="main-img">
 <img src="images/house.jpg" width="100%">
</div>
<div id="main-ppa" class="main-img" style="display:none;">
 <img src="images/house-paved-patio.png" width="100%">
</div>
<div id="main-gar" class="main-img" style="display:block;">
 <img src="images/house-garage.png" width="100%">
</div>
<div id="main-cpo" class="main-img" style="display:block;">
 <img src="images/house-covered-porch.png" width="100%">
</div>
<div id="main-cpa" class="main-img" style="display:none;">
 <img src="images/house-covered-patio.png" width="100%">
</div>
<div id="estimate"></div>
<script>
 document.getElementById("estimate").innerHTML = "Your estimated total is $" + calculate_total('main-ppa', 'main-cpa', 'main-cpo', 'main-gar');
</script>

The Javascript can't look at your CSS directly. If you use inline styling your code should work as intended.

How to calculate totals based on current state of divs

6 Answers6