CSS:
.Input { background-color:grey; }
.Input:focus { background-color: white; }
HTML:
Enter the first number:<br>
<br>
Enter the second number:<br>
<br>
Enter the third number:<br>
<br>
Enter the fourth number:<br>
<br>
Enter the fifth number:<br>
<br>
<br>
Submit
<h1></h1>
JavaScript:
function get_product_of_inputs() {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var c = document.getElementById("c").value;
var d = document.getElementById("d").value;
var e = document.getElementById("e").value;
var f = a*b*c*d*e;
console.log(f);
document.getElementById("Submit").innerHTML= ("Product of all the numbers are "+f);
}
I am literally trying to put "you are entering a number" when someone select the input field. What can I do? Please help me out. I am a bit confused at this point?
use onfocus="yourjsfunc();" in your html code. For example:
<input id="a" type="text" onfocus="yourjsfunc();">
And use display:none and display:block to hide and show your text-element.
<form>
<div>
<label for="number">
<input id="number" name="number">
<span data-id="helper-text">You are entering a number</span>
</label>
</div>
<div>
<label for="foo">
<input id="foo" name="foo">
<span data-id="helper-text">You are entering foo</span>
</label>
</div>
</form>
[data-id="helper-text"] {
display: none;
}
label:focus-within [data-id="helper-text"] {
display: inline-block;
}
function changeHelperTextDisplay(target, style) {
const helperTextEl = target
.closest('label')
?.querySelector('[data-id="helper-text"]');
if (helperTextEl) {
helperTextEl.style.display = style;
}
}
function handleFocus(event) {
changeHelperTextDisplay(event.target, 'inline-block');
}
function handleBlur(event) {
changeHelperTextDisplay(event.target, 'none');
}
const inputs = document.querySelectorAll('input');
inputs.forEach((input) => {
input.addEventListener('focus', handleFocus);
input.addEventListener('blur', handleBlur);
});