HTML DOM Number Object: Accessing Number Input Elements

The HTML DOM Number object represents an HTML <input type="number"> element. This object provides access to the properties and methods that allow you to programmatically interact with number input fields in your web forms. You can use JavaScript to read, modify, and validate the values entered by users, enhancing the interactivity and robustness of your web applications. This article will explore the various aspects of the HTML DOM Number object, showcasing its capabilities with practical examples.

Understanding the <input type="number"> Element

The <input type="number"> element is a specialized form control designed for accepting numerical values. It typically displays up/down arrow buttons for users to increment or decrement the value, and it restricts input to numeric characters (and potentially decimal points and minus signs). This element’s DOM object gives you granular control over this functionality.

Accessing Number Input Elements

To interact with a number input element, you first need to obtain a reference to it using JavaScript. You can do this using methods like document.getElementById(), document.querySelector(), or others as needed.

<input type="number" id="quantityInput" value="5" min="1" max="10" step="1">

const quantityInputEl = document.getElementById('quantityInput');

In the above code:

• The HTML creates a number input field with id="quantityInput".
• The JavaScript retrieves the HTML element using document.getElementById().
• The retrieved element is stored in quantityInputEl, which is now of type HTMLInputElement.

Key Properties and Methods

The HTML DOM Number object inherits properties and methods from the base HTMLElement and HTMLInputElement interfaces. Here are some of the most relevant properties and methods specifically useful for working with number inputs:

Property/Method	Type	Description
`type`	String	Returns the type of the input element, which is “number” for number inputs.
`value`	String	Gets or sets the current value of the number input field as a string. Note that the HTMLInputElement value property will always be string, so you may have to use methods like parseFloat or parseInt to convert it into a numeric value.
`valueAsNumber`	Number	Gets or sets the current value of the number input field as a number. Use this to avoid parsing string values if you just need the numeric representation.
`min`	String	Gets or sets the minimum allowed value.
`max`	String	Gets or sets the maximum allowed value.
`step`	String	Gets or sets the value increment/decrement step.
`validity`	ValidityState Object	Returns a `ValidityState` object which contains boolean properties indicating validation state of input such as `rangeOverflow`, `rangeUnderflow` or `stepMismatch`.
`stepUp(number)`	Method	Increments the value of the input by the specified number (or by the default step if not provided) and returns the new value. The value will not go beyond the `max` attribute.
`stepDown(number)`	Method	Decrements the value of the input by the specified number (or by the default step if not provided) and returns the new value. The value will not go below the `min` attribute.
`checkValidity()`	Method	Checks if the input field has any constraint violations. Returns `true` if the element has no validation error. You should call this before accessing any values or submitting a form.
`reportValidity()`	Method	Similar to `checkValidity()`, but in addition, it shows an error to the user if invalid. Returns `true` if the element has no validation error.

Practical Examples

Let’s delve into a series of examples that demonstrate how to use the HTML DOM Number object for real-world scenarios.

Example 1: Getting and Setting Values

This example demonstrates how to get and set the value of a number input field using the value and valueAsNumber properties.

<input type="number" id="priceInput" value="19.99" step="0.01">
<p id="priceDisplay">Current Price: </p>
<button id="updatePrice">Update Price</button>

<script>
  const priceInputEl = document.getElementById('priceInput');
  const priceDisplayEl = document.getElementById('priceDisplay');
  const updateButtonEl = document.getElementById('updatePrice');

    priceDisplayEl.textContent = "Current Price: "+ priceInputEl.valueAsNumber;

  updateButtonEl.addEventListener('click', () => {
    const newPrice = parseFloat(priceInputEl.value);
      if(!isNaN(newPrice))
      {
       priceInputEl.valueAsNumber = newPrice + 10; // Increment by 10
        priceDisplayEl.textContent = "Current Price: "+ priceInputEl.valueAsNumber;
      }
     else
     {
        priceDisplayEl.textContent = "Please enter valid number.";
     }

  });
</script>

Output:

Initially, the display shows “Current Price: 19.99”. Clicking the “Update Price” button increases the price by 10 and shows the updated price “Current Price: 29.99” (or similar) if a valid number is entered. If an invalid number is entered, an error message will be displayed.

Example 2: Using min, max, and step Attributes

This example demonstrates how to use the min, max, and step attributes to control the range and increment of the input field.

  <label for="ageInput">Age:</label>
    <input type="number" id="ageInput" value="25" min="18" max="65" step="1" />
    <p id="ageMessage"></p>
    <button id="validateAgeBtn">Validate Age</button>

<script>
    const ageInputEl = document.getElementById("ageInput");
    const ageMessageEl = document.getElementById("ageMessage");
    const validateAgeBtnEl = document.getElementById("validateAgeBtn");

    validateAgeBtnEl.addEventListener("click", () => {
        if (ageInputEl.checkValidity()) {
             ageMessageEl.textContent = "Age is valid.";
        } else {
            ageMessageEl.textContent = "Age is out of range (18-65).";
        }
    });

    ageInputEl.addEventListener('input', ()=>{
         ageInputEl.reportValidity();
    })
</script>

Output:

The input field only accepts values between 18 and 65. If the entered value is outside of this range, the validation message “Age is out of range (18-65).” will be displayed when the “Validate Age” button is clicked or when the input changes. Otherwise, it shows “Age is valid.”. This will also show the validation message inline with the input.

Example 3: Using stepUp() and stepDown()

This example demonstrates how to programmatically increment or decrement the value using the stepUp() and stepDown() methods.

 <input type="number" id="qtyInput" value="5" min="0" max="10" step="1" />
  <button id="incrementBtn">Increment</button>
  <button id="decrementBtn">Decrement</button>
   <p id="qtyDisplay">Quantity: 5</p>

<script>
  const qtyInputEl = document.getElementById('qtyInput');
  const incrementBtnEl = document.getElementById('incrementBtn');
  const decrementBtnEl = document.getElementById('decrementBtn');
  const qtyDisplayEl = document.getElementById('qtyDisplay');

  qtyDisplayEl.textContent = "Quantity: " + qtyInputEl.valueAsNumber;

  incrementBtnEl.addEventListener('click', () => {
    qtyInputEl.stepUp();
    qtyDisplayEl.textContent = "Quantity: " + qtyInputEl.valueAsNumber;
  });

  decrementBtnEl.addEventListener('click', () => {
    qtyInputEl.stepDown();
     qtyDisplayEl.textContent = "Quantity: " + qtyInputEl.valueAsNumber;
  });
</script>

Output:

Initially, the display shows “Quantity: 5”. Clicking the “Increment” button increases the value by one, and clicking the “Decrement” button decreases the value by one. The output is displayed accordingly. The values will be within the limits of min and max of the input.

Example 4: Validating Input Values with validity and reportValidity()

This example demonstrates how to use the validity property and reportValidity() method to validate the input and provide feedback.

<input type="number" id="priceCheck" value="10" min="5" max="50" step="5"/>
<p id="priceValidation"></p>
<button id="checkPriceBtn">Check Price</button>

<script>
  const priceCheckEl = document.getElementById('priceCheck');
  const checkPriceBtnEl = document.getElementById('checkPriceBtn');
  const priceValidationEl = document.getElementById('priceValidation');

  checkPriceBtnEl.addEventListener('click', () => {
   if(priceCheckEl.reportValidity())
   {
         priceValidationEl.textContent = "Price is valid.";
   }
   else
    {
      priceValidationEl.textContent = "Please enter a valid price between 5 to 50 in multiples of 5.";
    }

  });
</script>

Output:

Initially, the display will be empty. Clicking “Check Price” will validate the input. If the value is valid (between 5 and 50, and a multiple of 5), “Price is valid.” will be displayed. If not, “Please enter a valid price between 5 to 50 in multiples of 5.” will be displayed, with a browser inline error.

Browser Support

The HTML DOM Number object is well-supported across all modern browsers, ensuring consistent behavior on different platforms.

Note: While generally well-supported, always test your form elements across different browsers to ensure consistency, especially if you are using more advanced validation techniques or interactions. 🧐

Conclusion

The HTML DOM Number object provides a robust and versatile way to interact with numeric input elements in HTML forms. By leveraging properties like value, min, max, and step, along with methods like stepUp(), stepDown(), checkValidity() and reportValidity(), you can create dynamic and user-friendly forms with effective input validation. Understanding these properties and methods is essential for any web developer looking to build high-quality and interactive web applications.