Tengo un html simple con un cuadro de entrada (id = entrada) y un botón (id = botón) con 'Mostrar' como texto del botón. Escribí JavaScript para cambiar mostrar a ocultar al hacer clic y cosas básicas.
Inicialmente, no se muestra ningún botón (ya que la visualización de botones no es ninguna). Lo que quiero es tan pronto como escriba algo en el cuadro de entrada Mostrar botón debe mostrar. ¿Cómo hacerlo en JavaScript?
Aquí está mi JavaScript: -
let input = document.getElementById('input'); let btn = document.getElementById('button'); btn.addEventListener('click', () => { if (btn.innerText === "SHOW") { btn.innerText = "HIDE"; input.type = "text"; } else { btn.innerText = "SHOW"; input.type = "password"; } })El siguiente fragmento muestra y oculta el botón de acuerdo con los datos que se encuentran dentro de la entrada
Además, este es el evento que estaba buscando https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
document.querySelector("#pass").addEventListener('input', (event) => { if (document.querySelector("#pass").value.length === 0 ) { document.querySelector("#btn").style.display = 'none'; } else { document.querySelector("#btn").style.display = 'inline-block'; } } ); #btn { display: none; } <input id="pass"> <button id="btn"> Show </button>El siguiente código debería ayudarlo con la pregunta que hizo (es decir, no ocultará automáticamente el botón)
document.querySelector("#pass").addEventListener('input', () => { document.querySelector("#btn").style.display = 'inline-block'; }); #btn { display: none; } <input id="pass"> <button id="btn"> Show </button>Si entendí su pregunta correctamente, debe agregar un detector de eventos de cambio al campo de entrada. para que, cuando haya un cambio en el campo de entrada, pueda decidir qué hacer.
input.addEventListener("change", function(){ if (input.value !== ""){ // do something } else { do something else } } )El siguiente fragmento es el modelo de trabajo de lo que pediste 👇
intente evitar el uso de innerText , innerHTML ni los atributos on* .
referencia :
let input = document.getElementById('dataEntry') let displayButton = document.getElementById('btn') document.addEventListener('input', () => { if (input.value.length === 0) { displayButton.style.display = 'none'; } else { displayButton.style.display = 'inline-block'; } }) displayButton.addEventListener('click', (event) => { if (event.target.textContent.toLowerCase() === 'hide') { input.type = 'password' event.target.textContent = 'Show' } else { input.type = 'text' event.target.textContent = 'Hide' } }) .container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } #btn { display: none; } <div class='container'> <input type='text' id='dataEntry' placeholder='Enter your password' required/> <button id='btn'>Hide</button> </div>