¿Cómo puedo hacer invisible un cuadro de texto html y luego se vuelve visible cuando un usuario hace clic en un botón? Ese botón ya tiene una función js para obtener valores de una API, pero ¿también puede hacer visible un cuadro de texto? Por cierto, estoy usando getElementh por id. El cuadro de texto es <input type="textbox" id="city"> Gracias
Suponiendo que haya configurado la visualización de su cuadro de texto para bloquear, simplemente puede hacerlo si usa onclick:
<button onclick="showHideTextBox()">Click Me to Show/Hide</button> <input type="textbox" id="city"> <script> function showHideTextBox(){ var x = document.getElementById("city"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script>En lugar de bloquear, puede agregar cualquier valor de atributo de visualización que desee agregar y dentro de la función showHideTextBox puede agregar otra lógica que sea necesaria para sus llamadas API.
Encontré una gran respuesta sobre cómo mostrar elementos ocultos en javascript: Cómo mostrar u ocultar un elemento:
Sí, ese botón también puede hacer visible el cuadro de texto. Agregue el código visible del cuadro de texto a la función de detector de eventos del botón junto con su función API de obtención existente.
const button = document.getElementById("button"); button.addEventListener("click", function(){ // write textbox's show/hide function // call your existing function })Para mostrar/ocultar el cuadro de texto, puede alternar una clase.