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

此外，如果您对一个问题有多个答案，请添加 , between 而不是 &?

Answer 1

已更新

这是根据评论更新的片段。更改您的事件侦听器函数，如下所示：

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>

Javascript onclick 再次点击时如何撤消

Javascript onclick how to undo when clicked again

javascript

arrays

variables

undo