问题的出现原因：在代码中，使用了parseInt()函数将输入的值转换为整数，但是如果输入的值不是数字，parseInt()函数会返回NaN（Not a Number）。

解决方法：在使用parseInt()函数之前，先对输入的值进行验证，确保其为有效的数字。可以使用isNaN()函数来检查一个值是否为NaN。如果输入的值为NaN，可以给出错误提示或者要求用户重新输入有效的数字。

文章整理如下：

在上述代码中，我们尝试解决了一个问题，即在计算结果时可能会返回NaN（Not a Number）。下面是代码片段：

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

在这段代码中，我们使用了parseInt()函数将输入的值转换为整数，以便进行计算。然而，如果输入的值不是数字，parseInt()函数将返回NaN（Not a Number）。为了解决这个问题，我们可以在使用parseInt()函数之前，先对输入的值进行验证，确保其为有效的数字。可以使用isNaN()函数来检查一个值是否为NaN。如果输入的值为NaN，可以给出错误提示或者要求用户重新输入有效的数字。

为了演示问题的产生和解决方法，我们提供了附加的HTML和CSS代码。请注意，这些代码与问题的解决方案没有直接的关联，但是它们提供了一个完整的示例，以便更好地理解问题和解决方案。

/* 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;
}

    
   

       

           
Scrappage Payment Survey
       
        

        

                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    Calculate
                
            
       
   
 

希望这篇文章对您有所帮助。

问题出现的原因是没有正确调用onclick事件，导致控制台出现NaN（不是一个数字）。解决方法是正确调用事件，并且可以使用JavaScript中的Math.round()函数进行四舍五入。

首先，在head中添加jQuery引用：

然后，在按钮上添加onclick事件来调用calc()函数：

Calculate

接下来，添加calc()函数：

function calc() {
    debugger
    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);
}

最后，可以使用Math.round()函数对结果进行四舍五入。可以参考以下链接了解更多关于Math.round()函数的用法：

[https://www.w3schools.com/JSREF/jsref_round.asp](https://www.w3schools.com/JSREF/jsref_round.asp)

在这个例子中，点击calculate按钮会导致页面刷新。为了解决这个问题，我们需要在函数中添加event.preventDefault()来阻止页面刷新。

此外，还有一个问题是结果的小数位数不正确。为了保留结果的两位小数，我们可以使用toFixed()函数。在这个例子中，我们可以将result.toFixed(2)来保留两位小数。

下面是修改后的代码：

const calculate = document.getElementById('one');
calculate.addEventListener('click', calc);
function calc(event) {
    // 阻止页面刷新
    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.toFixed(2));
}

这样修改后，点击按钮将不会导致页面刷新，并且结果将会保留两位小数。

参考链接：stackoverflow.com/questions/32300649/…