Javascript onclick how to undo when clicked again-CodePudding

I'm creating a filter to search for your perfect shoe's by answering questions. Right now I've got a couple of questions, each with multiple answers. By clicking on an answer a variable gets edited with the data of the value of that answer. The problemm is that you can click on the variable as many times as you like and the value will keep being added. Is there a way to change the color of the answer button when clicked and when clicked again it undo's adding the value to the variable and changes the color back?

Code:

<div >
    <div id="question"></div>
    <div id="answer"></div>
    <button onclick="check()" id="nextbtn">Next</button>
    <div id="finalLink"></div>      
</div>
<script type="text/javascript">

    var ShoeTest = [
        [
            'Whats your size?',
            ['41', '41'],
            ['42', '42'],
            ['43', '43']
        ],
        [
            'What color would you like?',
            ['Red', 'red'],
            ['Blue', 'blue'],
            ['Yellow', 'yellow'],
            ['Green', 'green']
        ],
        [
            'What brand would you like?',
            ['Adidas', 'adidas'],
            ['Nike', 'nike'],
            ['Puma', 'puma']
        ]
    ];

    let parms = [];

    count = 1;
    var questionNumber = 0;
    var button = document.getElementById('answer');
    var question = document.getElementById('question');
    var answerButton;
    var flag = true;

    function getLink(parms) {
        return "" parms.join("&")
      };

      button.addEventListener("click",function(e) {
        const tgt = e.target;
        parms.push(tgt.value);
        console.log(getLink(parms))
      })

    function check(){
        oldAnswerButton = document.querySelectorAll('.filter_anwser');
        oldQuestion = document.getElementById('question');
        for(let z = 0; z < oldAnswerButton.length; z  ){
            oldAnswerButton[z].style.display = 'none';
        }
        //question 
        for (let y = 1; y < ShoeTest[questionNumber].length; y  ){
            // button
            var btn = document.createElement('button');
            btn.value = ShoeTest[questionNumber][y][1];
            btn.className = "filter_anwser";
            btn.textContent = ShoeTest[questionNumber][y][0];
            btn.setAttribute('data-el', 1);
            btn.onclick = ButtonColor();
            button.appendChild(btn);
            // class
            answerButton = document.querySelectorAll('.filter_anwser');
        }
        // question
        question.textContent = ShoeTest[questionNumber][0];
        question.id = "questionID";
                
        console.log(".....");
        // adds 1 to question to see a different question
        questionNumber  ;
    }

    function ButtonColor(){
        btn = document.getElementById('answer');
        btn.style.backgroundcolor = flag ? "unclicked" : "clicked"
       flag = !flag;
    }

Also if you have multiple answers of one questions add a , between instead of a &?

CodePudding user response：

UPDATED

Here's the updated snippet based on the comments. Change your event listener function like below:

button.addEventListener("click", function(e) {
  const tgt = e.target;
  if (parms && parms.indexOf(tgt.value) == -1) {
    parms.push(tgt.value);
    e.target.style.backgroundColor = "red";
  } else {
    parms.splice(parms.indexOf(tgt.value), 1)
    e.target.style.backgroundColor = "white";
  }
  console.log(getLink(parms))
})

PREVIOUSLY

From your question, I can understand you are looking for changing the button color on click and click again (undo). And update the value that happens on click and click again (undo). Here's a more simplified example that exactly does this which you can apply in your problem:

var flag = true;
function changeColorAndValue() {
    flag = !flag;
    document.getElementById("myButton").style.background = flag ? 'yellow' : 'blue';
}

<button id="myButton" onclick="changeColorAndValue()">Click</button>