如何使用querySelector获取元素的value属性

Question

I am a newbie when it comes to JavaScript. I just made some practice projects to further sharpen my knowledge.

How do i get the value property of and element using ID?

This one seems to work :

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

But i wanted to use the querySelector method instead of getElementById. Whats the best and proper way to do it?

so far i have tried the code below but did not work :

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> 

you may view the whole source code of the project via this link : https://codepen.io/anthony-bahinting/pen/dybegMW

Answer 1

Your code evaluates the value of #billamt immediately, no value has been given by the user yet. Instead, save a reference to the element and ask for its value when you run your calculate() method.

 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>