¿Cómo puedo obtener un botón multifunción en JS? Por ejemplo: el primer clic moverá el botón hacia abajo, el siguiente clic lo devolverá al lugar predeterminado.
let caoButton = document.querySelector('.js-cao-2'); caoButton.style.position = 'absolute'; caoButton.style.top = '0'; caoButton.style.left = '0'; caoButton.addEventListener('click',() { caoButton.style.top = 'unset'; caoButton.style.left = 'unset'; caoButton.style.bottom = '0'; caoButton.style.right = '0'; });De acuerdo con @charlietfl
let caoButton = document.querySelector('.js-cao-2'); caoButton.addEventListener('click',()=>caoButton.classList.toggle("moveDown")); .js-cao-2{ position: absolute; top: 0; left: 0; } .moveDown { top: unset; left: unset; bottom: 0; right: 0; } <div style="height: 100vh"> <button class="js-cao-2" >Move me</button> </div>En caso de que desee hacer algo más que solo manipule el css y deba usar JavaScript, también puede hacer algo como:
let caoButton = document.querySelector('.js-cao-2'); caoButton.addEventListener('click',firstFunctionality); function firstFunctionality(){ caoButton.removeEventListener('click', firstFunctionality) caoButton.addEventListener('click',secondFunctionality); //do stuff here } function secondFunctionality(){ caoButton.removeEventListener('click', secondFunctionality) caoButton.addEventListener('click', firstFunctionality); //do something different here }Esto activará múltiples acciones en el botón.
let caoButton = document.querySelector('.js-cao-2'); const allTasks = (function* makeTaskGetter(){ const tasks = [ 'js-cao-2-down', 'js-cao-2-right', 'js-cao-2-up', 'js-cao-2-left' ]; for (const task of tasks) { yield task; } })(); caoButton.addEventListener('click', e => { const { value : task } = allTasks.next(); caoButton.classList.add(task); }); .js-cao-2 { position: absolute; } .js-cao-2-down { top: 100px; } .js-cao-2-right { left: 100px; } .js-cao-2-up { top: 10px; } .js-cao-2-left { left: 10px; } <button class="js-cao-2">Click Me</button> También considere usar transform: translate dependiendo de su caso de uso.