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); }Literalmente estoy tratando de poner "está ingresando un número" cuando alguien selecciona el campo de entrada. ¿Que puedo hacer? Por favor, ayúdame. Estoy un poco confundido en este punto?
use onfocus="yourjsfunc();" en su código html. Por ejemplo:
<input id="a" type="text" onfocus="yourjsfunc();">Y use display:none y display:block para ocultar y mostrar su elemento de texto.
<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); });