INFORMACIÓN: Hola, estoy tratando de hacer eso si hago clic en mi entrada que tiene la search-input ID, de modo que si escribo algo en la entrada, la clase cancel , que es la cruz que restablece el valor, es como <button type =" reset "> entonces si escribo algo para que me aparezca así display: block; y si elimino o ingreso, no tendrá un valor para display: none; y me gustaría hacer todo esto para que funcione incluso si el usuario no tiene Javascript, así que me gustaría hacerlo en la versión de PHP, pero no sé qué tengo hasta ahora, solo tengo este código que muestra el ícono cuando hay algo en la entrada pero desafortunadamente el código ha dejado de funcionar y especialmente cuando elimino la entrada a través del botón para que el ícono no desaparezca para obtener más información, asegúrese de no tener miedo de preguntar.
const input = document.getElementById("search-input") const button = document.getElementById("cancel") const icon = document.getElementById("icon") input.addEventListener('keyup', test); button.addEventListener("button", test) function test() { let isShown = false if (input.value.trim() == "" || isShown == false) { icon.style.display = "none" isShown = true } else { icon.style.display = "flex" } }PD: Todo fue traducido por el traductor de Google si hubo un error o no entendiste algo escribe y definitivamente te diré cómo se debe pensar de antemano muchas gracias por tu ayuda.
Creo que la respuesta de Uttam Nath estuvo cerca de lo que querías, pero no exactamente. Esto puede funcionar mejor:
EDITAR: Muy bien, cambié un poco el código y agregué el HTML para que no haya confusión.
<body> <input type="text" id="search-input"> <button type="button" id="cancel">Cancel</button> <div id="icon" style="background-color: green; width: 50px; height: 50px; display: none;"></div> </body> <script> const input = document.getElementById("search-input"); const button = document.getElementById("cancel") const icon = document.getElementById("icon"); input.addEventListener('keyup', changeIconDisplay); button.addEventListener('click', () => { input.value = ''; changeIconDisplay(); }); function changeIconDisplay() { if (input.value.trim() == "" ) { icon.style.display = "none"; } else { icon.style.display = "flex"; } } </script>