JavaScript getElementById始终返回null(JavaScript getElementById always returning null)
我正在尝试建立一个简单的预算计算器，每次我点击我的提交按钮我没有任何反应。 当我尝试在控制台中检查我的变量值时，即使我在输入框中输入了值，它们也显示为null。 谁能告诉我我做错了什么？ 在查看了其他问题后，我找不到与我的问题相关的答案。
<!DOCTYPE html> <html> <head> <title>Budget Calculator</title> <style> input {display:block;} #clear {float:left;} #submit {float:left;} </style> <script type="text/javascript"> var kms = document.getElementById("kmTravelled"); var rent = document.getElementById("rentPerMonth"); var carCost = document.getElementById("carPayment"); var costPerTrip = (kms/12.75)*20; var total = Math.round((costPerTrip + rent + carCost)*100)/100; function calculate() { document.getElementById("calculator").innerHTML = total; } </script> </head> <body> <form id="myForm")> Km travelled per day: <input type="number" name="kmTravelled" /> Rent per month: <input type="number" name="rentPerMonth" /> Car payment per month: <input type="number" name="carPayment" /> </form> <button id="submit" type="button" onclick="calculate();"> Submit </button> <button id="clear" type="clear"> Clear </button> <p id = "calculator"> </p> <script> calculate(); </script> </body>I am trying to build a simple budget calculator, everytime I click my submit button I nothing happens. When I try to check my variable values in the console they show null, even after I have typed values in my input boxes. Can anyone tell me what I'm doing wrong? After looking through other questions on here I haven't been able to find an answer that relates to my issue.
<!DOCTYPE html> <html> <head> <title>Budget Calculator</title> <style> input {display:block;} #clear {float:left;} #submit {float:left;} </style> <script type="text/javascript"> var kms = document.getElementById("kmTravelled"); var rent = document.getElementById("rentPerMonth"); var carCost = document.getElementById("carPayment"); var costPerTrip = (kms/12.75)*20; var total = Math.round((costPerTrip + rent + carCost)*100)/100; function calculate() { document.getElementById("calculator").innerHTML = total; } </script> </head> <body> <form id="myForm")> Km travelled per day: <input type="number" name="kmTravelled" /> Rent per month: <input type="number" name="rentPerMonth" /> Car payment per month: <input type="number" name="carPayment" /> </form> <button id="submit" type="button" onclick="calculate();"> Submit </button> <button id="clear" type="clear"> Clear </button> <p id = "calculator"> </p> <script> calculate(); </script> </body>最满意答案
我建议使用id属性并移动部分以获取函数内部的值，以及获取value属性并将字符串值转换为数字以进行计算。
function calculate() {
var kms = +document.getElementById("kmTravelled").value;
var rent = +document.getElementById("rentPerMonth").value;
var carCost = +document.getElementById("carPayment").value;
var costPerTrip = (kms / 12.75) * 20;
var total = Math.round((costPerTrip + rent + carCost) * 100) / 100;
document.getElementById("calculator").innerHTML = total;
}
input { display: block; }
#clear { float: left; }
#submit { float: left; }
<form id="myForm">
Km travelled per day: <input type="number" name="kmTravelled" id="kmTravelled"/> Rent per month: <input type="number" name="rentPerMonth" id="rentPerMonth" /> Car payment per month: <input type="number" name="carPayment" id="carPayment" />
</form>
<button id="submit" type="button" onclick="calculate();">Submit</button>
<button id="clear" type="clear">Clear</button>
<p id="calculator"></p>
I suggest to use id attributes and move the parts for getting the values inside of the function, as well as getting value property and cast the string value to number for calculation.
function calculate() {
var kms = +document.getElementById("kmTravelled").value;
var rent = +document.getElementById("rentPerMonth").value;
var carCost = +document.getElementById("carPayment").value;
var costPerTrip = (kms / 12.75) * 20;
var total = Math.round((costPerTrip + rent + carCost) * 100) / 100;
document.getElementById("calculator").innerHTML = total;
}
input { display: block; }
#clear { float: left; }
#submit { float: left; }
<form id="myForm">
Km travelled per day: <input type="number" name="kmTravelled" id="kmTravelled"/> Rent per month: <input type="number" name="rentPerMonth" id="rentPerMonth" /> Car payment per month: <input type="number" name="carPayment" id="carPayment" />
</form>
<button id="submit" type="button" onclick="calculate();">Submit</button>
<button id="clear" type="clear">Clear</button>
<p id="calculator"></p>
更多推荐
发布评论