I would like to use DOM manipulations for visual changes in fields and forms.
manipulating font and background colors of fields as data is displayed.
manipulating masks in real time on fields.
manipulating colors and format of selection fields according to the selected option.
An example would be to display negative values with a red font after a tax calculation, and for this I usually use the DOM to select the input object and change its color or format.
This is a sample code where negative numbers will be displayed with red font color and positive numbers will be displayed with blue font color:
HTML code
<input type="number" id="numInput" placeholder="value">
Javascript code
document.getElementById('numInput').addEventListener('input', function() {
const inputValue = parseFloat(this.value);
if (!isNaN(inputValue)) {
if (inputValue < 0) {
this.style.color = 'red';
} else {
this.style.color = 'blue';
}
} else {
this.style.color = 'black'; // Default color if number is 0
});
How could I proceed to apply these visual effects with frontend functions?
