Javascriptonclick如何在再次單擊時撤消

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

代碼：

<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 而不是 &?

uj5u.com熱心網友回復：

更新

這是基于評論的更新片段。更改您的事件偵聽器功能，如下所示：

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 数组 变量 撤销

上一篇：我的腳本沒有根據計時器觸發所有電子郵件

下一篇：有條件的解構