返回NaN

时间：2020-09-18 13:29:21

标签： javascript

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

但是，我无法进行第一个计算。我的第一个功能是计算每月节省30％的汽油支出，并从每月付款（价格）中减去节省的费用。加载网站后，即使在单击分配了事件侦听器的按钮之前，控制台中仍显示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>

3 个答案:

答案 0 :(得分：4)

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);
}

答案 1 :(得分：0)

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

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>

希望，它将为您提供帮助

答案 2 :(得分：0)

步骤1 我在头部添加了jQuery参考

for k,v in d.items():
      if any(l) in v:
         print(d[k][whichever_element_matches_above])

步骤2 我添加了onclick事件来调用calc（）函数 计算 第三步 我添加了此脚本，现在可以正常工作

函数calc（）{ 调试器 let gas = parseInt（document.getElementById（'gas'）。value）; 让价格= parseInt（document.getElementById（'price'）。value）; 节省气体； 让结果 gasSaving =气体* 0.3; 结果=价格-节省气体； console.log（result）; }

据我了解，您没有正确调用该事件，这就是为什么NA​​N（非数字）出现在控制台中的原因，您在评论中询问的第二件事很简单 https://www.w3schools.com/JSREF/jsref_round.asp 请检查此链接，它将为您提供帮助

相关问题
最新问题