A way to unclick a button that has been clicked using Javascript

Question

Is there a way to deselect or unclick a button that has been clicked using javascript?

So basically I have a button:

if (i === 10) {
        var clicked = document.getElementById('i10');
        clickedButton.push(click.textContent);
        clicked.style.color = "pink";
}

So when i click that button it turns the text to pink. Is there a way to click on the button again and have it remove the push and turn the text back to black?

Sorry, Javascript isn't my strongest point.

what do you mean by unclick? once a button is clicked its clicked it doesnt keep a state, unless you are setting some kind of flag. Do you mean to unbind a click event? — Patrick Evans, Jun 01 '15 at 03:50
@PatrickEvans perhaps that will help. In my situation I click the button which changes the text. Now i want to unclick the button it remove that click in the beginning. Does that make sense? — anonymous4321, Jun 01 '15 at 03:51
Can you share the code samples are explain what are you looking for? do you want to put back the original text when the same button is clicked again? — Arun P Johny, Jun 01 '15 at 03:53
It'd be better if you explained what you have and what you want — JSelser, Jun 01 '15 at 03:53
You really need to put all those explanations into your post and eliminate all the guesswork. You should also share the code what you have so far that changes button state. — martynasma, Jun 01 '15 at 03:55
@JSelser My apologies. I added some code and further explanation — anonymous4321, Jun 01 '15 at 04:00
@martynasma My apologies. I added some code and further explanation — anonymous4321, Jun 01 '15 at 04:01
probably you need to share how the method is getting called and the complete method that is being called — Arun P Johny, Jun 01 '15 at 04:02
@anonymous4321 i think you want this https://jsfiddle.net/0rwsujov/ — Kishan, Jun 01 '15 at 04:02

Mike 'Pomax' Kamermans · Answer 1 · 2015-06-01T04:17:46.217

Web programming lesson time: if you want to set styles, don't use JavaScript to set the style, use CSS for the styling definitions, and then only use JavaScript to point to that CSS.

In your CSS:

.highlight {
  color: pink;
  background: blue;
  font-style: fantasy;
  whatever-else: StuffGoesHere;
}

And then your button handling:

button.addEventListener("click", function(evt) {
  var e = find.your.element.however.you.need();
  e.classList.toggle("highlight");
});

Magic: simply by doing things the right way, the code is extremely straight forward, AND we're not hardcoding the styling, we're simply referring to where styling should be defined.

"But what if the browser doesn't support .classList?": the only reason to say this is because you did not keep up with how much browser have improved. Every browser supports classList.

Of course, if you need to do more than just toggles, write your function as a standalone operation, and throw elements at it:

var records = {};

function toggleHighlight(e) {
  e.classList.toggle("highlight");
  if (e.classList.contains("highlight")) {
    // element is now highlighted, do things accordingly:
    records[e.id] = e.textContent;
    // ...
  } else {
    records[e.id] = false;
    // ...
  }
}

button.addEventListener("click", function(evt) {
  var e = find.your.element.however.you.need();
  toggleHighlight(e);
});

score 1 · Answer 2 · answered Jun 01 '15 at 04:08

Do this help you?

function onclick(){
        var clicked = document.getElementById('i10');
        if(clicked.style.color == "pink"){
            clicked.style.color == "black";
        }
        else{
            clicked.style.color == "pink";
            //do your businesses                
        }
}

score 0 · Answer 3 · answered Jun 01 '15 at 04:04

From the shared code, you can do something like check if the textContent already exists in teh array if so it is already clicked so remove it from the array and change the color

if (i === 10) {
    var clicked = document.getElementById('i10'),
        index = clickedButton.indexOf(click.textContent);
    if (index > -1) {
        clickedButton.push(click.textContent);
        clicked.style.color = "pink";
    } else {
        clickedButton.splice(index, 1);
        clicked.style.color = "";
    }
}

score 0 · Answer 4 · edited May 23 '17 at 11:58

Yes:

if (i === 10) {
  var clicked = document.getElementById('i10');
  var index = clickedButton.indexOf(click.textContent);
  if (index === -1) {
    // toggle on
    clickedButton.push(click.textContent);
    clicked.style.color = "pink";
  } else {
    // toggle off
    clickedButton.splice(index, 1);
    clicked.style.color = "";
  }
}

This will check if click.textContent is already in the clickedButton array. If it is it will remove it from that array as well as reset button color to whatever default is.

Please note that, searching arrays using indexOf is not supported in IE7-8. If you need support for those browsers, you will need to implement this as well:

if (!('indexOf' in Array.prototype)) {
    Array.prototype.indexOf= function(find, i /*opt*/) {
        if (i===undefined) i= 0;
        if (i<0) i+= this.length;
        if (i<0) i= 0;
        for (var n= this.length; i<n; i++)
            if (i in this && this[i]===find)
                return i;
        return -1;
    };
}

The above is taken from StackOverflow thread: Fixing JavaScript Array functions in Internet Explorer (indexOf, forEach, etc.).

That worked with the coloring.. is there a way to unpush the textContent that was pushed in the beginning when clicking the button? — anonymous4321, Jun 01 '15 at 04:44
I spent two days assuming this is possible. It might not. Let's hope this comment works as a bump to the thread. — secr, Jun 18 '20 at 16:20

A way to unclick a button that has been clicked using Javascript

4 Answers4