El objetivo es mover un botón de un div a otro al hacer clic y luego volver al otro si se vuelve a hacer clic y continuar haciéndolo cada vez que se hace clic.
Mi problema es que el código que compartí solo se ejecuta una vez; lo que necesito es que este comportamiento se ejecute continuamente.
const ham = document.getElementById('ham'); const mh = document.querySelector('.mobile-header'); const hc = document.querySelector('.header .content'); ham.addEventListener('click', function() { document.body.classList.toggle('nav-is-toggled'); mh.insertAdjacentElement('afterbegin', ham); ham.addEventListener('click', function() { hc.insertAdjacentElement('afterbegin', ham); }); }); <header> <div class="header content"> <span id="ham">X</span> </div> </header> <nav> <div class="mobile-header"></div> </nav>Está agregando una clase al cuerpo, pero no hay una declaración if. Mira este ejemplo:
const ham = document.getElementById('ham'); const mh = document.querySelector('.mobile-header'); ham.addEventListener('click', function() { document.body.classList.toggle('nav-is-toggled'); if (document.body.classList.contains('nav-is-toggled')) { mh.insertAdjacentElement('afterbegin', ham); } else { mh.insertAdjacentElement('afterend', ham); } }); <div class="mobile-header">mobile-header</div> <div id="ham">ham</div>La forma más sencilla:
const ham = document.getElementById('ham') , mh = document.querySelector('.mobile-header') , hc = document.querySelector('.header.content') ; ham.onclick = () => { let DomObj = document.body.classList.toggle('nav-is-toggled') ? mh : hc DomObj.insertAdjacentElement('afterbegin', ham) } header, nav { height : 3em; background : lightsteelblue; margin : 1em; } <header> <div class="header content"> <span id="ham">XxxxxxxxxX</span> </div> </header> <nav> <div class="mobile-header"></div> </nav>Puede usar dos divs y agregar js. haz dos botones, uno en cada div.
div2.style.display = block let button1 = //select the button inside the 1st div let div1 = //select the 1st div let button2 = //… let div2 = /… button1.addEventListener(`click`, function(){div1.style.display = `none` div2.style.display = block }) button2.addEventListener(`click`, function(){div2.style.display = `none` div1.style.display = block })