Guide on retrieving the value property of an element with querySelector

Question

Guide on retrieving the value property of an element with querySelector

I am new to JavaScript and have been working on some practice projects to improve my skills.

What is the best way to retrieve the value property of an element using its ID?

I have tried the following code, which seems to be working:

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

However, I would like to use the querySelector method instead of getElementById. What is the correct way to do this?

So far, the code I have tried has not worked:

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 can view the entire source code of the project by clicking on this link: https://codepen.io/anthony-bahinting/pen/dybegMW

javascript

Answer 1

Answer №1

Your code is attempting to evaluate the value of #billamt right away, even though there is no user input yet. It would be more efficient to first save a reference to the element and then request its value when the calculate() function is executed.

const billamtElem = document.querySelector('#billamt'); // Reference to 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>

Answer 2

Your code is attempting to evaluate the value of #billamt right away, even though there is no user input yet. It would be more efficient to first save a reference to the element and then request its value when the calculate() function is executed.

const billamtElem = document.querySelector('#billamt'); // Reference to 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>

Guide on retrieving the value property of an element with querySelector

Answer №1

Similar questions

Is there a reason why this jquery is not functioning properly in Internet Explorer 8?

The Google Maps directions stay visible even when new routes are generated

Unable to display an image element in fullscreen within a modal that is already fullscreen

Using ThreeJS/WebGL to Send Functions to Shaders

error message remains visible even after correct input is entered

Removing a Firestore Document when the identifier is assigned to a unique name that is not predefined in any location

Filter the object by its unique identifier and locate the entry with the highest score

What is the best way to convert an Angular object into a string using a for-loop and display it using $sce in AngularJS?

Issue with getStaticProps functionality on Vercel seems to be persisting

Issue encountered while attempting to log out a user using Keycloak in a React JS application

Experiencing trouble with retrieving the selected image source and showing it in a text field

Performing an axios request using form data in a React JS application

The feature for adding a function in Moment.js seems to be malfunctioning

What could be causing the error message 'Uncaught SyntaxError: Identifier 'randFilmIndex' has already been declared'?

PHP Proxy - Sending Files using cURL

Toggle the Editable Feature in AngularJS JSON Editor

Preventing Click Events during Data Fetching in React.js without Using jQuery

Material UI: Easily adjusting font size within Lists

Tips for preventing the appearance of two horizontal scroll bars on Firefox

NodeJS Streams: Delay in data transfer with Readable.pipe()