NaN錯誤時乘以

Question

我有這個腳本乘以兩列，並在第三顯示總數。這是代碼：

<script> 
$(function() { 
    $("#num1, #num2").on("keydown keyup", sum); 
    function sum() { 
    $("#total").val(Number($("#num1").val()) * Number($("#num2").val())); 
    } 
}); 
</script> 

與形式：

<form method="POST" name="form1" action="" "> 

<label>num1</label> 
<input name="num1" id="num1" type="text" value="SOMENUMBER" /> 

<label>num2</label> 
<input type="text" name="num2" id="num2" value="SOMENUMBER"/> 

<label>total</label> 
<input type="text" name="total" style="width: 40%;" id="total" readonly /> 

<button class="square" name="btn" type="submit">SOMEBUTTONNAME</button> 

</form> 

Answer 1

你有3倍"在HTML：action="" "。

此代碼可以防止非數字字符和計算單擊按鈕上的結果或更改某個數字。

function sum() { 
 
    var num1 = $("#num1").val().replace(",","."); 
 
    var num2 = $("#num2").val().replace(",","."); 
 
    var decimals_prepare = (num1.indexOf(".") > -1) ? num1.split(".")[1].length : 0; 
 
    
 
    return (!isNaN(num1) && !isNaN(num2)) ? $("#total").val((num1 * num2).toFixed(decimals_prepare)) : console.log("false"); 
 
} 
 

 
$(function() { 
 
    $("#num1, #num2").on("keydown keyup", sum); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="POST" name="form1" action=""> 
 

 
    <label>num1</label> 
 
    <input name="num1" id="num1" type="text" value="5" /> 
 

 
    <label>num2</label> 
 
    <input type="text" name="num2" id="num2" value="2" /> 
 

 
    <label>total</label> 
 
    <input type="text" name="total" style="width: 40%;" id="total" readonly /> 
 

 
    <button class="square" name="btn" type="submit" onclick="sum()">SOMEBUTTONNAME</button> 
 

 
</form>

Answer 2

檢查，如果你有第一次

function sum() { 

    var value1 = $("#num1").val(); 
    var value2 = $("#num2").val(); 

    if (isNaN(value1) || isNaN(value2){ 
     return; 
    } 

    $("#total").val(Number(value1) * Number(value2)); 
}