Question

我正在制作一张定价表，允许您输入商品的数量并自动计算成本。我已经创建了方程式，现在只需要添加结果以得到总数，这不起作用并显示NaN错误。是因为数据没有格式化为数字吗？或者它与我的函数加载的顺序有关？我是JavaScript的新手，任何帮助都会很棒，干杯！

<!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 class="clear"></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");
            var price2 = document.getElementById("result1");
            var x = +price1 + +price2;
            var z = "$" + x.toFixed(2);
            document.getElementById("total").innerHTML = z;

            function sum() {
                var price1 = document.getElementById("result1");
                var price2 = document.getElementById("result1");
                var x = +price1 + +price2;
                var z = "$" + x.toFixed(2);
                document.getElementById("total").innerHTML = z;
            }
        </script>
    </body>
</html>

Answer 1

问题是段落的文字内容需要被理解为innerHTML（或textContent）。另外，在对它们执行数学运算之前，您需要从中删除$符号：

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

演示： http://jsfiddle.net/2vwqgkre/

Answer 2

此行的结果 [object HTMLParagraphElement] 是<!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>。首先需要获取innerHTML，然后需要替换 $ 符号来计算值。所以将代码更改为：

{{1}}

Answer 3

有点晚了，但我希望这是正确的。有一些错误。我就是这样做的：

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

它更好，因为它会对更改和文档加载时做出反应。

Javascript - Sum / Total正在读取NaN

3 个答案: