Javascript 如何根据div的当前状态计算总计

我所拥有的是一个有javascript覆盖div的房屋平面图

我想创建一个函数，根据是否显示这些div id来计算数字，然后返回答案

这是JSFIDLE

以及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>

---

任何帮助都将不胜感激

试试这样的方法：

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

---

你的代码有很多问题。首先，函数需要在调用之前可用。因此，您需要在左上角的jQuery下面设置为No wrap-in。然后你的代码有很多问题。您需要了解使用本机JavaScript检查元素是否可见的语法和正确语法。以下是更新的代码：

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不是函数，因此不应返回estimate（）

元素.style.display属性查看样式HTML属性。像这样：

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

将发出警报

none

但是当CSS文件像您这样设置

显示

样式时，它会提示

未定义

或空字符串

能够确定一个元素是否实际显示更为复杂。见此答案：

---

如果这是一个简单的应用程序，那么设置

style

属性可能是最简单的。另一种方法是输入一个复选框，并查看它是否被选中。

尝试将javascript更改为：

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

并将您的html添加到此：

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

document.getElementById（“estimate”）.innerHTML=“您的估计总额为$”+计算总额（'main-ppa'、'main-cpa'、'main-cpo'、'main-gar'）；

Javascript不能直接查看CSS。如果使用内联样式，则代码应按预期工作。

主要问题是脚本被分离，当estimate是一个值而不是一个函数时，您正在运行

return estimate（）

我对代码做了一些小的改进，但要变得更清晰、更清晰，还有很长的路要走。

检查这把小提琴

我对@brain\u bacon的答案做了一点修改，以获得计算风格

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');

---

---

您可以检查getComputedStyle的限制

问题出在哪里？我想我看到了问题所在。您正在检查元素的

样式

属性，但未对其进行设置。JS不会深入CSS文件查看CSS类是否正在设置display属性。请使用return estimate而不是return estimate（）；抱歉，我正在使用javascript设置样式，因此它正在该步骤中查找和编辑样式。然而。它甚至没有给我返回的打印部分“你的估计总数是：$”@Leegelie，你愿意使用jQuery吗？这样做会容易得多，但这行不通。

元素.style.display

属性只查看元素的

属性。CSS类正在设置

display

属性，并且

style.display

将不可用。您是对的。如果OP可以使用jQuery，我会相应地编辑我的答案。那么我需要将它们更改为HTML中的样式而不是样式表吗？@Leegelie我发布了一个答案，并对其进行了评论。几乎！！！这不是给我一个障碍。我只需要在div显示为“block”时添加金额，但它仍然没有这样做。谢谢。我仍然无法将计算结果与显示的div的附加值相加。我更新了链接和小提琴@jwatts1980建议样式信息不可用，因为它是CSS而不是内联的。我按照最后一次编辑的建议添加了getComputedStyle。我把它改成了

！='无'

，因为CSS中有不同的显示类型。非常感谢。很好，谢谢。我已经改正了。现在，它向我显示了原始的数字，但显示为“块”的div没有增加。一旦我用javascript onClick按钮更改div的状态，有没有办法让“计算”总数重新计算？@LeeGellie我认为Amy的答案在数学修正方面更完整。我只是想确保您了解

元素.style

属性是如何工作的，并且该属性太长，无法添加注释。@Leegelie看起来该函数将可重用。我认为您应该能够根据需要多次调用它。我在我的按钮上的函数末尾添加了“document.getElementById（“estimate”）.innerHTML=“您的估计总数为$”+calculate_total（'main-ppa'、'main-cpa'、'main-cpo'、'main-gar'）；”以更改div状态，它工作得非常好！！我想我在编辑小提琴以使用getComputedStyle:时错过了你的答案：）

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

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

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');

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');