En este menú, intento cambiar el símbolo "+" a "-" al hacer clic, pero no sé cómo proceder. Será un botón que luego cambiaré a íconos personalizados...
html
<header id="header"> <div class="header-container"> <p id="logo">Logo</p> <nav id="nav"> <div id="btn-mobile">+</div> <ul id="menu"> <li><a href="#">Sobre</a></li> <li><a href="#">Trabalhos</a></li> <li><a href="#">Carreiras</a></li> <li><a href="#">Contato</a></li> </ul> </nav> </div> </header>js
const btnMobile = document.getElementById('btn-mobile'); function toggleMenu() { const nav = document.getElementById('nav'); nav.classList.toggle('active'); } btnMobile.addEventListener('click', toggleMenu);¡Gracias!
Todo lo que tienes que hacer es usar innerText en tu btn-mobile
const btnMobile = document.getElementById('btn-mobile'); function toggleMenu() { const nav = document.getElementById('nav'); const btnMobile = document.getElementById('btn-mobile'); nav.classList.toggle('active'); btnMobile.innerText = '-'; } btnMobile.addEventListener('click', toggleMenu); o textContent , ambos hacen casi el mismo trabajo, solo hay una pequeña diferencia. Referencia: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
MDN es un gran lugar para aprender estos métodos básicos de JS DOM.
Puede usar i y usar la clase css para establecer el contenido de + o -
const btnMobile = document.getElementById('icon'); function toggleMenu() { if (btnMobile.classList.contains('icon-plus')) { btnMobile.classList.remove('icon-plus'); btnMobile.classList.add('icon-minus') } else if (btnMobile.classList.contains('icon-minus')) { btnMobile.classList.remove('icon-minus'); btnMobile.classList.add('icon-plus') } } btnMobile.addEventListener('click', toggleMenu); .icon-plus:after { content: '+'; cursor: pointer; } .icon-minus:after { content: '-'; cursor: pointer; } <header id="header"> <div class="header-container"> <p id="logo">Logo</p> <nav id="nav"> <div id="btn-mobile"> <i id='icon' class="icon icon-plus"></i> </div> <ul id="menu"> <li><a href="#">Sobre</a></li> <li><a href="#">Trabalhos</a></li> <li><a href="#">Carreiras</a></li> <li><a href="#">Contato</a></li> </ul> </nav> </div> </header>