Onclick should run a function and when clicked again should return/display the original value

Question

When I clicked on a button I want it to run a function and when the buttons is clicked again I want it to go back to his default value.
E.g. When I clicked on the button it should display "added to cart" when clicked again it should display "remove from cart" and the cycle continue.

///////////////The JavaScript code//////
counter = 0;

var number0fItems = document.getElementById("counter");

number0fItems.innerHTML = counter;
/*this loops through the button to know which button was clicked*/

document.querySelectorAll(".eventBtn").forEach(function(item){

/*the var firstime is to stop the counter from iterating multiple times when the button is clicked multiple times*/

var firsttime = true;
item.onclick = function(event){
if (firsttime){
firsttime = false;
this.innerHTML = "Remove from cart"; this.style.backgroundColor = "#FFE9D6";
counter++;
number0fItems.innerHTML = counter; }
}
})

Answer 1

you should define two functions, one for adding, the other for removing, both out of the forEach function...

in each, you have to redefine the .onclick attribute with the other one:

function addToCart() {
this.onclick = remFromCart;
this.textContent = "remove";
// your code to handle the add to cart feature
}
function remFromCart() {
this.onclick = addToCart;
this.textContent = "add";
// your code to handle the remove from cart feature
}
document.querySelectorAll(".eventBtn").forEach(btn => {
btn.onclick = addToCart;
btn.textContent = "add";
});

obviously, by this way you can only add or remove only one of each item ^^

Answer 2

Is this what you're trying to do?

https://code.sololearn.com/WhxrDU632CJo/?ref=app

Answer 3

Thank you so much visph it works perfectly well now. Apologies for the late reply, had issues with electricity here.

Thank you Arturop ChaoticDawg Frogged for your contribution also. I'm really grateful.

Answer 4

Perhaps an else block, that clears the innerHTML u r modfying.

Answer 5

Share the code in playgrounds so we can try the bugged app u r building, dont forget to add your else statement.

Answer 6

Adewale IyanuOluwa
I figured it was a button for each item item that was displayed on the page. If this is the case then all you would need to do is a couple of modifications to the if and else blocks.
For example if there are 10 items on the page, each with a picture, description, etc. Each item would have a button that said "Add to cart" below it. When clicked the if statement is ran in the click event listener function. Here you would just need to add the actual code to add it to the cart etc. This also changes the text of the button below the item to read "Remove from cart". If it is clicked when this text is displayed on the button the else block is ran and you'd just need to add the code to remove the item from the cart etc.

If this isn't what you're trying to do, please add a better detailed description when you add your code.

Answer 7

Add a class to each button and toggle it at click.so class or not class is your switch.

Answer 8

I add an else statement to the code. The counter didn't iterate backward or change to 0 and secondly the process isn't continou(when I try to click on the third time, the process didn't repeat)

Answer 9

ChaoticDawg something similar. But I want each button to work like a switch. Just like when you are shopping on an online store. I can add to cart and remove from cart with the same button

Answer 10

Arturop I will do that soon. I'm using Visual studio code on my laptop for the project. I will copy them here and share with you also

Answer 11

SoloLearn has web platform. Just saying in case u didnt know. Most ppm think is inly android app