how I can get a multifunction button in JS? For example: the first click will move the button down, the next click will return it to the default place.
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';
});
Agree with @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>In case you wish to do something more that just manipulate the css and you must use JavaScript, you can also do something like:
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
}
This will trigger multiple actions on the button.
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>Also consider using transform: translate depending on your use case.