无法完成这个简单的计算器练习.我得到了一个错误

Question

我正在从头开始编写一个简单的代码，结果在console.log中得到Nan错误和未定义。

任何改进此代码的建议都将受到欢迎。

许多谢谢。

<div>
<h1>Exercises</h1>
<h4>Items calculator</h4>
<p>Enter value</p>
<input type="number" id="numberitems">
<p>Enter price</p>
<input type="number" id="priceitems">
<br>
<br>
<button id="pricebtn">Calcular Precio</button>
<br>
<p>Resultado</p>
<span id="finalPrice"></span>

</div>
<script>
let items = document.getElementById("numberitems");
let price = document.getElementById("priceitems");
let finalPrice = items * price;
const btnprice = document.getElementById("pricebtn");

function myFunction1() {
document.getElementById("finalPrice").innerHTML += finalPrice.value;
}
btnprice.addEventListener("click", myFunction1);
console.log(finalPrice);
</script>

Answer 1

首先:你是在乘输入，而不是它的值。

要获取输入字段的值，必须使用.value(而不是finalPrice.value)

作为第二:你的价格计算在页面加载，而不是点击事件。结果是未定义的，因为items和price在页启动时初始化，在那里它们还未定义。

要正确工作，必须在函数中获取值并执行计算。

<script>
function myFunction1() {
let items = 0;
items = document.getElementById("numberitems").value;
let price = 0;
price = document.getElementById("priceitems").value;
let finalPrice = items * price;
document.getElementById("finalPrice").innerHTML += finalPrice;
console.log(finalPrice);
}
const btnprice = document.getElementById("pricebtn");
btnprice.addEventListener("click", myFunction1);
</script>

Answer 2

试试这个:

let items = document.getElementById("numberitems").value;//从这个id获取值let price = document.getElementById("priceitems").value;//从这个id获取值let finalPrice = Number(items*price);const btnprice = document.getElementById("pricebtn");函数myFunction1() {. getelementbyid("finalPrice")。innerHTML += finalPrice;}btnprice。addEventListener("点击",myFunction1);console.log (finalPrice);