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

另外，如果您对一个问题有多个答案，请在之间添加一个 , 而不是 &？

Answer 1

更新

这是基于 cmets 的更新后的 sn-p。更改您的事件侦听器函数，如下所示：

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>