返回 NaN 的 Javascript 函数答案

【问题标题】：Javascript Function Returning NaN返回 NaN 的 Javascript 函数
【发布时间】：2020-09-18 13:29:21
【问题描述】：

我正在制作一个计算器，它将从调查表中获取输入，然后将结果推送到一个对象，以便我可以将其显示在网站的其他部分并使用 chart.js

但是，我无法进行第一次计算。我的第一个功能是计算每月节省 30% 的汽油费用（gas），并从每月付款（价格）中减去节省的费用。当站点加载时，甚至在单击分配了事件侦听器的按钮之前，我在控制台中得到了 NaN。

我哪里错了？

P.S 我还没有让表单响应，所以需要在完整的浏览器中查看。

const calculate = document.getElementById('one');

calculate.addEventListener('click', calc());

function calc() {
    let gas = parseInt(document.getElementById('gas').value);
    let price = parseInt(document.getElementById('price').value);
    let gasSaving;
    let result;
    gasSaving = gas * 0.3;
    result = price - gasSaving;
    console.log(result);
}

/* Survery Section Start */

.survery {
    background-color: #1b262c;
    padding-bottom: 100px;
}

.survery-h1 {
    color: white;
    text-align: center;
    padding-top: 5rem;
}

input {
    text-indent: 10px;
}

.survery-questions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.home-name-footer {
    width: 600px;
    height: 45px;
    margin-bottom: 3em;
    margin-left: 90px;
    margin-right: 25px;
}

.home-phone-footer {
    height: 45px;
    margin-bottom: 3em;
    width: 600px;
    margin-left: 25px;
}

.home-email-footer {
    width: 600px;
    height: 45px;
    margin-bottom: 3em;
    margin-left: 90px;
    margin-right: 25px;
}

#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}

.btn-calc {
    padding: 1rem 2.5rem;
    width: 15rem;
    background-color: #168ecf;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    color: #eee;
    transition: all .5s;
    margin-bottom: 3rem;
    margin-top: 1rem;
    text-align: center;
}

<html>
<head>
</head>
<body>
    <!-- Survery Start -->
   <section class="survery">
       <div class="survery-title">
           <h1 class="survery-h1">Scrappage Payment Survey</h1>
       </div>
        <form action="">
        <div class="survery-questions">
                <div class="name-form">
                    <input type="text" placeholder="Gas Supplier" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input type="text" placeholder="Gas Meter Serial No." class="home-phone-footer" id="input" required>
                </div>
                
                <div class="email-form">
                    <input  placeholder="Monthly Gas Spend" class="home-email-footer" id="gas" required>
                </div>

                <div class="phone-form">
                    <input type="text" placeholder="System Monthly Payment" class="home-phone-footer" id="price" required>
                </div>

                <div class="name-form">
                    <input type="text" placeholder="Number Of Bathrooms" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input type="text" placeholder="Number Of Radiators" class="home-phone-footer" id="input" required>
                </div>

                <div class="name-form">
                    <input type="text" placeholder="System Size Required (Kw)" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input type="text" placeholder="Number Of Residents" class="home-phone-footer" id="input" required>
                </div>
                <div class="thebutton">
                    <button class="btn-calc" id="one">Calculate</button>
                
                </form>

            </div>
       </div>
   </section>
 <!-- Survery End-->
</body>
</html>

【问题讨论】：

你不应该在添加eventListener时调用函数calc:calculate.addEventListener('click', calc);
好的，我已经进行了更改，但我的功能根本不起作用。我不知道为什么
@Anon2945 通过删除括号，您可以将函数注册为事件处理程序。您现在必须单击计算按钮才能运行您的函数。

标签： javascript

【解决方案1】：

calculate.addEventListener('click', calc());

到

calculate.addEventListener('click', calc);

带括号的calc() 将直接执行该函数，而没有它只会被调用。

另外，您应该添加一个事件防止默认不刷新页面。

const calculate = document.getElementById('one');

calculate.addEventListener('click', calc);

function calc(event) {

    // Prevent page refresh.
    event.preventDefault();

    let gas = parseInt(document.getElementById('gas').value);
    let price = parseInt(document.getElementById('price').value);
    let gasSaving;
    let result;
    gasSaving = gas * 0.3;
    result = price - gasSaving;
    console.log(result);
}

【讨论】：

为什么在这个例子中页面会刷新？我在 youtube 上看到的简单计算器示例不添加 even.preventDefault();另外，如何将结果四舍五入到小数点后 2 位？谢谢
@Anon2945 stackoverflow.com/questions/32300649/…
@Anon2945 它默认刷新，因为您在 <form> 元素中有一个按钮。
啊，有道理。谢谢！
如果设置了<button type="button"，则可以省略event.preventDefault()，否则默认为type="submit"。当使用“按钮”时：“按钮没有默认行为，默认按下时什么也不做。它可以让客户端脚本监听元素的事件，当事件发生时触发。” MDN <button>

【解决方案2】：

我已尝试解决该问题：请检查

const calculate = document.getElementById('one');

calculate.addEventListener('click', calc);

function calc() {
    let gas = parseInt(document.getElementById('gas').value);
    let price = parseInt(document.getElementById('price').value);
    let gasSaving;
    let result;
    gasSaving = gas * 0.3;
    result = price - gasSaving;
    console.log(result);
}

/* Survery Section Start */

.survery {
    background-color: #1b262c;
    padding-bottom: 100px;
}

.survery-h1 {
    color: white;
    text-align: center;
    padding-top: 5rem;
}

input {
    text-indent: 10px;
}

.survery-questions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.home-name-footer {
    width: 600px;
    height: 45px;
    margin-bottom: 3em;
    margin-left: 90px;
    margin-right: 25px;
}

.home-phone-footer {
    height: 45px;
    margin-bottom: 3em;
    width: 600px;
    margin-left: 25px;
}

.home-email-footer {
    width: 600px;
    height: 45px;
    margin-bottom: 3em;
    margin-left: 90px;
    margin-right: 25px;
}

#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}

.btn-calc {
    padding: 1rem 2.5rem;
    width: 15rem;
    background-color: #168ecf;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    color: #eee;
    transition: all .5s;
    margin-bottom: 3rem;
    margin-top: 1rem;
    text-align: center;
}

<html>
<head>
</head>
<body>
    <!-- Survery Start -->
   <section class="survery">
       <div class="survery-title">
           <h1 class="survery-h1">Scrappage Payment Survey</h1>
       </div>
        <form action="">
        <div class="survery-questions">
                <div class="name-form">
                    <input type="text" placeholder="Gas Supplier" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input type="text" placeholder="Gas Meter Serial No." class="home-phone-footer" id="input" required>
                </div>
                
                <div class="email-form">
                    <input  placeholder="Monthly Gas Spend" class="home-email-footer" id="gas" required>
                </div>

                <div class="phone-form">
                    <input type="text" placeholder="System Monthly Payment" class="home-phone-footer" id="price" required>
                </div>

                <div class="name-form">
                    <input type="text" placeholder="Number Of Bathrooms" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input type="text" placeholder="Number Of Radiators" class="home-phone-footer" id="input" required>
                </div>

                <div class="name-form">
                    <input type="text" placeholder="System Size Required (Kw)" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input type="text" placeholder="Number Of Residents" class="home-phone-footer" id="input" required>
                </div>
                <div class="thebutton">
                    <button class="btn-calc" id="one">Calculate</button>
                
                </form>

            </div>
       </div>
   </section>
 <!-- Survery End-->
</body>
</html>

希望对你有帮助

【讨论】：

【解决方案3】：

步骤 #1 我在头部添加了 jquery 引用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

步骤 #2 我添加了 onclick 事件来调用 calc() 函数计算步骤#3 我添加了这个脚本，现在它工作正常

函数计算（）{ 调试器让气体 = parseInt(document.getElementById('gas').value); 让价格 = parseInt(document.getElementById('price').value); 让gasSaving；让结果； gasSaving = gas * 0.3; 结果=价格-gasSaving；控制台.log（结果）； }

我理解您没有正确调用该事件，这就是为什么 NAN(Not a Number) 出现在控制台中，而您在评论中询问的第二件事非常简单 https://www.w3schools.com/JSREF/jsref_round.asp 请检查此链接，它将对您有所帮助

【讨论】：