![](/img/trans.png)
[英]How to change again once you clicked once with onclick in JavaScript
[英]Javascript onclick how to undo when clicked again
我正在创建一个过滤器,通过回答问题来搜索您的完美鞋子。 现在我有几个问题,每个问题都有多个答案。 通过单击答案,可以使用该答案值的数据编辑变量。 问题是您可以根据需要多次单击变量,并且该值将不断添加。 有没有办法在单击时更改答案按钮的颜色,当再次单击时,它会撤消将值添加到变量并将颜色更改回来?
代码:
<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 而不是 &?
更新
这是基于评论的更新片段。 更改您的事件侦听器 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.