Javascript-总和/总数正在读取NaN_Javascript

Javascript-总和/总数正在读取NaN

javascript

Javascript-总和/总数正在读取NaN,javascript,Javascript,我正在制作一个定价表，允许您输入一个项目的数量，并将自动计算成本。我已经创建了方程，现在只需要将结果相加，就可以得出一个总数，这个总数不起作用，并且显示一个NaN错误。是因为数据没有格式化为数字吗？还是与我的函数加载的顺序有关？我是JavaScript新手，任何帮助都会很好，干杯项目1 项目2 总数 var x=document.getElementById（“box1”）.value；变量y=x*6.23； var z=“$”+y.toFixed（2）； document.get

我正在制作一个定价表，允许您输入一个项目的数量，并将自动计算成本。我已经创建了方程，现在只需要将结果相加，就可以得出一个总数，这个总数不起作用，并且显示一个NaN错误。是因为数据没有格式化为数字吗？还是与我的函数加载的顺序有关？我是JavaScript新手，任何帮助都会很好，干杯


项目1

项目2

总数

var x=document.getElementById（“box1”）.value；
变量y=x*6.23；
var z=“$”+y.toFixed（2）；
document.getElementById（“result1”）.innerHTML=z；
函数方程1（）{
var x=document.getElementById（“box1”）.value；
变量y=x*6.23；
var z=“$”+y.toFixed（2）；
document.getElementById（“result1”）.innerHTML=z；
}
var x=document.getElementById（“box2”）.value；
变量y=x*8.15；
var z=“$”+y.toFixed（2）；
document.getElementById（“result2”）.innerHTML=z；
函数方程2（）{
var x=document.getElementById（“box2”）.value；
变量y=x*8.15；
var z=“$”+y.toFixed（2）；
document.getElementById（“result2”）.innerHTML=z；
}
var price1=document.getElementById（“结果1”）；
var price2=document.getElementById（“结果1”）；
变量x=+price1++price2；
var z=“$”+x.toFixed（2）；
document.getElementById（“总计”）.innerHTML=z；
函数和（）{
var price1=document.getElementById（“结果1”）；
var price2=document.getElementById（“结果1”）；
变量x=+price1++price2；
var z=“$”+x.toFixed（2）；
document.getElementById（“总计”）.innerHTML=z；
}

问题在于段落的文本内容需要被解读为

innerHTML

（或

textContent

）。另外，在对其执行数学运算之前，您需要从中删除

符号：

var price1 = document.getElementById("result1").innerHTML.replace('$', '');
var price2 = document.getElementById("result1").innerHTML.replace('$', '');

演示：此行的结果

var price1=document.getElementById（“result1”）
是一个[object HTMLParagraphElement]
。首先需要获取它的innerHTML，然后需要替换$符号来计算值。因此，请将代码更改为：
<!doctype html>

<html>

<body>

<p>Item 1</p>
<input type="number" onkeyup="equation1() sum()" onkeydown="equation1(); sum()" value="3" id="box1">
<p id="result1"></p>
<div class="clear">
</div>
<p>Item 2</p>
<input type="number" onkeyup="equation2() sum()" onkeydown="equation2(); sum()" value="1" id="box2">
<p id="result2"></p>
<div class="clear">
</div>
<p>Total</p>
<p id="total"></p>
</div>

<script>

var x = document.getElementById("box1").value;
var y = x * 6.23;
var z = "$" + y.toFixed(2);
document.getElementById("result1").innerHTML = z;

function equation1() {
var x = document.getElementById("box1").value;
var y = x * 6.23;
var z = "$" + y.toFixed(2);
document.getElementById("result1").innerHTML = z;
}

var x = document.getElementById("box2").value;
var y = x * 8.15;
var z = "$" + y.toFixed(2);
document.getElementById("result2").innerHTML = z;

function equation2() {
var x = document.getElementById("box2").value;
var y = x * 8.15;
var z = "$" + y.toFixed(2);
document.getElementById("result2").innerHTML = z;
}

var price1 = document.getElementById("result1").innerHTML.replace('$', '');
var price2 = document.getElementById("result1").innerHTML.replace('$', '');
var x = +price1 + +price2;
var z = "$" + x.toFixed(2);
document.getElementById("total").innerHTML = z;

function sum() {
var price1 = document.getElementById("result1").innerHTML.replace('$', '');
var price2 = document.getElementById("result1").innerHTML.replace('$', '');
var x = +price1 + +price2;
var z = "$" + x.toFixed(2);
document.getElementById("total").innerHTML = z;
}

</script>

</body>

</html>


项目1

项目2

总数

var x=document.getElementById（“box1”）.value；
变量y=x*6.23；
var z=“$”+y.toFixed（2）；
document.getElementById（“result1”）.innerHTML=z；
函数方程1（）{
var x=document.getElementById（“box1”）.value；
变量y=x*6.23；
var z=“$”+y.toFixed（2）；
document.getElementById（“result1”）.innerHTML=z；
}
var x=document.getElementById（“box2”）.value；
变量y=x*8.15；
var z=“$”+y.toFixed（2）；
document.getElementById（“result2”）.innerHTML=z；
函数方程2（）{
var x=document.getElementById（“box2”）.value；
变量y=x*8.15；
var z=“$”+y.toFixed（2）；
document.getElementById（“result2”）.innerHTML=z；
}
var price1=document.getElementById（“result1”）.innerHTML.replace（“$”，“”）；
var price2=document.getElementById（“result1”）.innerHTML.replace（“$”，“”）；
变量x=+price1++price2；
var z=“$”+x.toFixed（2）；
document.getElementById（“总计”）.innerHTML=z；
函数和（）{
var price1=document.getElementById（“result1”）.innerHTML.replace（“$”，“”）；
var price2=document.getElementById（“result1”）.innerHTML.replace（“$”，“”）；
变量x=+price1++price2；
var z=“$”+x.toFixed（2）；
document.getElementById（“总计”）.innerHTML=z；
}
有点晚了，但我希望它是正确的。有一些错误。我会这样做：
<script>
    function calculate() {
    var x = document.getElementById("box1").value;
    var y = x * 6.23;
    var z = "$" + y.toFixed(2);
    document.getElementById("result1").innerHTML = z;

    var x = document.getElementById("box2").value;
    var y = x * 8.15;
    var z = "$" + y.toFixed(2);
    document.getElementById("result2").innerHTML = z;
    sum();
    }

    function sum() {
    var price1 = (document.getElementById("result1").innerHTML).substr(1);
    var price2 = (document.getElementById("result2").innerHTML).substr(1);
    var x = parseFloat(price1) + parseFloat(price2);
    var z = "$" + x.toFixed(2);
    document.getElementById("total").innerHTML = z.toString();
    }
</script>
</head>
<body onload="calculate();">
    <p>Item 1</p>
    <input type="number" onchange="calculate();" value="3" id="box1">
    <p id="result1"></p>
    <div class="clear">
    </div>
    <p>Item 2</p>
    <input type="number" onchange="calculate();" value="1" id="box2">
    <p id="result2"></p>
    <div class="clear">
    </div>
    <p>Total</p>
    <p id="total"></p>
    </div>
</body>


函数计算（）{
var x=document.getElementById（“box1”）.value；
变量y=x*6.23；
var z=“$”+y.toFixed（2）；
document.getElementById（“result1”）.innerHTML=z；
var x=document.getElementById（“box2”）.value；
变量y=x*8.15；
var z=“$”+y.toFixed（2）；
document.getElementById（“result2”）.innerHTML=z；
sum（）；
}
函数和（）{
var price1=（document.getElementById（“result1”）.innerHTML.substr（1）；
var price2=（document.getElementById（“result2”）.innerHTML.substr（1）；
var x=parseFloat（price1）+parseFloat（price2）；
var z=“$”+x.toFixed（2）；
document.getElementById（“total”）.innerHTML=z.toString（）；
}
项目1

项目2

总数


它更好，因为它会对更改和加载文档时作出反应。
只是一个建议。。。使用jquery。它会让你的代码看起来更漂亮nicer@kapetanios这可以在没有任何库的情况下很容易地编写和表达，代码非常简单。jQuery并不是所有问题的答案。学习如何编写常规JS很重要。@kapetanios：对于JavaScript新手来说，建议使用jQuery是一个非常糟糕的主意。让他先学习JS。我建议你可以使用parseFloat，但在这种情况下，它与+
相比没有什么区别，因为你无论如何都需要删除$
。我的观点是正确的，只有当float位于字符串的开头，而不是在符号后面时，使用parseFloat才有意义（除了+
或-
）之外；否则它将返回NaN
右侧，parseFloat
和parseInt停止解析第一个非数字字符的输入。如果找不到数字，它们将返回NaN。
<script>
    function calculate() {
    var x = document.getElementById("box1").value;
    var y = x * 6.23;
    var z = "$" + y.toFixed(2);
    document.getElementById("result1").innerHTML = z;

    var x = document.getElementById("box2").value;
    var y = x * 8.15;
    var z = "$" + y.toFixed(2);
    document.getElementById("result2").innerHTML = z;
    sum();
    }

    function sum() {
    var price1 = (document.getElementById("result1").innerHTML).substr(1);
    var price2 = (document.getElementById("result2").innerHTML).substr(1);
    var x = parseFloat(price1) + parseFloat(price2);
    var z = "$" + x.toFixed(2);
    document.getElementById("total").innerHTML = z.toString();
    }
</script>
</head>
<body onload="calculate();">
    <p>Item 1</p>
    <input type="number" onchange="calculate();" value="3" id="box1">
    <p id="result1"></p>
    <div class="clear">
    </div>
    <p>Item 2</p>
    <input type="number" onchange="calculate();" value="1" id="box2">
    <p id="result2"></p>
    <div class="clear">
    </div>
    <p>Total</p>
    <p id="total"></p>
    </div>
</body>