如何使用querySelector

Question

关于JavaScript，我是新手。我刚刚进行了一些练习项目，以进一步加深我的知识。

如何使用ID获取and元素的value属性？

这个似乎很有效：

var billAmount = document.getElementById("billamt").value;

但是我想使用querySelector方法代替getElementById。 最佳和正确的方法是什么？

到目前为止，我已经尝试了以下代码，但没有成功：

var billAmount = document.querySelector("#billamt").value;

const billamt = document.querySelector('#billamt').value;

function calculate() {
  console.log(billamt * 0.25);
}

<label>How much did you pay?
  <input id="billamt" type="text" placeholder="Bill Amount">
</label>
<button onclick="calculate()">Calculate</button>

您可以通过以下链接查看项目的全部源代码： https://codepen.io/anthony-bahinting/pen/dybegMW

Answer 1

您的代码会立即评估#billamt的值，而用户尚未提供任何值。而是保存对元素的引用，并在运行calculate()方法时询问其值。

const billamtElem = document.querySelector('#billamt'); // HTMLElement

function calculate() {
  console.log(billamtElem.value * 0.25);
}

<label>How much did you pay?
  <input id="billamt" type="text" placeholder="Bill Amount">
<label>
<button onclick="calculate()">Calculate</button>