javascript - 将两个选定值相加，然后显示结果 JavaScript

Question

一直在尝试从 ID 标签 totalDiv-totalDiv1 中获取每个显示所选值结果的值，然后将它们加在一起以显示 ID 标签中实时组合的值 totalall 但我一直得到 NaN。

<h2>£10 Each</h2>
<select name="iteam1" onChange="calc1()">
    <option value="10">1</option>
    <option value="20">2</option>
    <option value="30">3</option>
    <option value="40">4</option>
    <option value="50">5</option>
</select>

<div id="totalDiv1">&pound;10</div>

<h2>£10 Each</h2>
<select name="iteam" onChange="calc()">
    <option value="10">1</option>
    <option value="20">2</option>
    <option value="30">3</option>
    <option value="40">4</option>
    <option value="50">5</option>
</select>

<div id="totalDiv">&pound;10</div>
<br>
<h2>Total</h2>
<div id="totalall">&pound;0</div>

<script>
function calc() {

var fruitOrVeg = document.getElementsByName("iteam")[0].value;
var total = fruitOrVeg;
   document.getElementById("totalDiv").innerHTML= "£" +(total);
}
</script>

<script>
function calc1() {

var fruitOrVeg = document.getElementsByName("iteam1")[0].value;
var total = fruitOrVeg;
   document.getElementById("totalDiv1").innerHTML= "£" +(total);
}
</script>

<script>
window.onload = function total() {

    var y = document.getElementById("totalDiv").value;
    var z = document.getElementById("totalDiv1").value;
    var x = +y + +z;
    document.getElementById("totalall").innerHTML = "£" + x;
}
</script>

Answer 1

注意保重。1.不要混淆值和符号2. 您在 div 的 Calc 函数中添加了符号，后来尝试将它们组合起来，所以它显然不是数字；

http://jsfiddle.net/ga16gt74/

<h2>£10 Each</h2>
<select name="iteam1" onChange="calc1()">
    <option value="10">1</option>
    <option value="20">2</option>
    <option value="30">3</option>
    <option value="40">4</option>
    <option value="50">5</option>
</select>

<div id="totalDiv1">&pound;
  <span id="totalDiv1Value">0</span>
</div>

<h2>£10 Each</h2>
<select name="iteam" onChange="calc()">
    <option value="10">1</option>
    <option value="20">2</option>
    <option value="30">3</option>
    <option value="40">4</option>
    <option value="50">5</option>
</select>

<div id="totalDiv">&pound;
  <span id="totalDivValue">0</span>
</div>
<br>
<h2>Total</h2>
<div id="totalall">&pound;0</div>


<script>
function calc() {
    var fruitOrVeg = document.getElementsByName("iteam")[0].value;
    var value = fruitOrVeg;
    document.getElementById("totalDivValue").innerHTML= value;
    total();
}



function calc1() {
    var fruitOrVeg = document.getElementsByName("iteam1")[0].value;
    var value = fruitOrVeg;
    document.getElementById("totalDiv1Value").innerHTML= value;
    total();
}

function total() {

    var y = parseInt(document.getElementById("totalDivValue").innerHTML);
    var z = parseInt(document.getElementById("totalDiv1Value").innerHTML);
    var x = y+z;
    document.getElementById("totalall").innerHTML = "£" + x;
}
</script>