He hecho todo el HTML y CSS, pero la parte de JavaScript me confunde. ¿Cómo hago que un botón oculte o muestre texto cuando se hace clic?
Hay un error que aparece en la consola también. Dice que getElement no está definido. También intenté usar getElementByClassName pero aún aparece el mensaje de error.
El error dice Uncaught ReferenceError: getElement is not defined y lo mismo para getElementByClassName
--
En el código:
nav-btn = el botón que debería cambiar el texto
nav-links = el texto que debería aparecer
--
El código JavaScript:
const links = getElement(".nav-links") const navBtn = getElementByClassName('nav-btn') links.style.display = 'none'; navBtn.onclick = function () { if (links.style.display !== "none") { links.style.display = "none" } else { links.style.display = "block" } }¿Qué debo cambiar para que funcione?
Además, ¿qué hago con el problema de getElement?
Dado que getElement no está definido, debe usarlo como una función JS nativa, que no está disponible.
Si desea seleccionar un elemento con className, puede usar querySelector
const links = document.querySelector('.nav-links') Y getElementsByClassName devuelve una matriz de nodos, no solo un elemento. Así que cámbielo a querySelector para su caso de uso
const navBtn = document.querySelector('.nav-btn')Como se menciona en el comentario a continuación, su publicación getElement no es un método JS DOM nativo, por lo que aparece el error. Personalmente, usaría querySelector y agregaría un listener al botón. Y luego use CSS y classList para toggle y desactivar una clase de show . Hace que el código sea más corto y más legible.
const links = document.querySelector(".nav-links") const navBtn = document.querySelector('.nav-btn') navBtn.addEventListener('click', handleClick, false); function handleClick() { links.classList.toggle('show'); } .nav-links { display: none; } .show { display: block; } <div class="nav-links">Nav links</div> <button class="nav-btn">Toggle the nav!</button>