Javascript 将值返回为NaN的程序_Javascript

Javascript 将值返回为NaN的程序

javascript

Javascript 将值返回为NaN的程序,javascript,Javascript,我试图让这个程序工作，我已经运行了所有的东西，但我的值返回为NaN。我尝试将变量初始化为函数内外的数字，但都没有用。有什么帮助吗编辑：添加在整个脚本、html和所有内容中，与迄今为止建议的编辑一起使用 <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scal

我试图让这个程序工作，我已经运行了所有的东西，但我的值返回为NaN。我尝试将变量初始化为函数内外的数字，但都没有用。有什么帮助吗

编辑：添加在整个脚本、html和所有内容中，与迄今为止建议的编辑一起使用

<html>
<head>

   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   <title>Placeholder</title>


</head>

<body>
    <header>
        <h1>Resturant Calculator</h1>
    </header>

    <article>
        <fieldset>
                <label for="bill">
                    Bill Amount
                </label>
                <input type="number" id="bill" />
        </fieldset>
        <fieldset>
                <label for="tip">
                    Tip Percent
                </label>
                <input type="number" id="tip" />
                <label>(enter as whole number)</label>
        </fieldset>
        <fieldset>
                <label for="peeps">
                    # of people
                </label>
                <input type="number" id="peeps" />
        </fieldset>
        <button id="submit" onclcick="calculate()">Calculate</button>
        <p id="tipAmount">Tip Amount:</p>

        <p id="total">Total Bill:</p>
        <p id="totalByPeep">Total per Person:</p>
    </article>

   <script>
        "use strict"
        var bill = document.getElementById("bill").value;
        var tip = document.getElementById("tip").value;
        var peeps = document.getElementById("peeps").value;

        var total;
        var totalTip;
        var tpPerson;

        function calculate(){
            totalTip = bill.value / (tip.value * 0.01);
            total = bill.value + totalTip;
            tpPerson = total / peeps.value;

            document.getElementById("tipAmount").innerHTML = "Tip Amount: " + totalTip;
            document.getElementById("total").innerHTML = "Total: " + total;
            document.getElementById("totalByPeep").innerHTML = "Total per Person: " + tpPerson;
        }


        function createEventListener(){
            var submitButton = document.getElementById("submit");

            if (submitButton.addEventListener){
                submitButton.addEventListener("click", calculate, false);
            }
            else if(submitButton.attachEvent){
                submitButton.attachEvent("onclick", calculate);
            }

        }

        if (window.addEventListener){
            window.addEventListener("load", createEventListener, false);
        }
        else if (window.attachEvent){
            window.attachEvent("onload", createEventListener);
        }
</script>
   </script>

</body>
</html>


占位符
餐饮计算器
票据金额
小费百分比
（输入整数）
#人的
计算
小费金额：
账单总额：
每人总计：
“严格使用”
var bill=document.getElementById（“bill”）.value；
var tip=document.getElementById（“tip”）.value；
var peeps=document.getElementById（“peeps”）.value；
总风险价值；
var totalTip；
个人价值；
函数计算（）{
总小费=账单价值/（小费价值*0.01）；
总计=账单价值+总小费；
tpPerson=总/peeps.value；
document.getElementById（“tipAmount”）.innerHTML=“小费金额：”+totalTip；
document.getElementById（“总计”）.innerHTML=“总计：”+total；
document.getElementById（“totalByPeep”）.innerHTML=“每人总计：”+tpPerson；
}
函数createEventListener（）{
var submitButton=document.getElementById（“提交”）；
if（submitButton.addEventListener）{
submitButton.addEventListener（“单击”，计算，假）；
}
else if（submitButton.attachEvent）{
submitButton.attachEvent（“onclick”，计算）；
}
}
if（window.addEventListener）{
addEventListener（“加载”，createEventListener，false）；
}
else if（窗口附件）{
attachEvent（“onload”，createEventListener）；
}

您需要从元素

bill

，

tip

，

peeps

可能类似于

document.getElementById（“bill”）.value

仅使用

document.getElementById（“bill”）

您选择的是元素，而不是它的值

您需要读取

calculate（）中的值
这是正确的。您还需要将这些值转换为数字，因为输入值总是字符串。您可以使用“parseInt”、“Number”或一个“+”来实现这一点；是的，我同意，建议将其转换为数字。输出也将取决于您正在执行的操作。例如，如果您使用的是+
is，则会将数字与“string number”连接起来，但它们都再次返回了NaN。但是，当稍后在calculate（）
函数中使用.value
时，它工作了，但数字完全错误。请与我们共享完整的代码。每次要执行计算时，您都需要在calculate（）中获取值。添加了我所有的内容和编辑，谢谢您的帮助。
    function calculate(){
        bill = +bill.value, tip = +tip.value, peeps = +peeps.value;
        totalTip = bill/ (tip * 0.01);
        total = bill + totalTip;
        tpPerson = total / peeps;

        document.getElementById("tipAmount").innerHTML = "Tip Amount: " + totalTip;
        document.getElementById("total").innerHTML = "Total: " + total;
        document.getElementById("totalByPeep").innerHTML = "Total per Person: " + +tpPerson;
    }