Javascript onclick 再次單擊時如何撤消

Question

我正在創建一個過濾器，通過回答問題來搜索您的完美鞋子。 現在我有幾個問題，每個問題都有多個答案。 通過單擊答案，可以使用該答案值的數據編輯變量。 問題是您可以根據需要多次單擊變量，並且該值將不斷添加。 有沒有辦法在單擊時更改答案按鈕的顏色，當再次單擊時，它會撤消將值添加到變量並將顏色更改回來？

代碼：

<div class="container">
    <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;
    }

此外，如果您對一個問題有多個答案，請添加 a, between 而不是 &?

Answer 1

更新

這是基於評論的更新片段。 更改您的事件偵聽器 function 如下所示：

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))
})

之前

根據您的問題，我可以理解您正在尋找在單擊時更改按鈕顏色並再次單擊（撤消）。 並更新單擊並再次單擊（撤消）時發生的值。 這是一個更簡化的示例，您可以將其應用於您的問題：

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

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