I’m creating a filter to search for your perfect shoe’s by answering questions. Right now I’ve got a couple of questions, each with multiple answers. By clicking on an answer a variable gets edited with the data of the value of that answer. The problemm is that you can click on the variable as many times as you like and the value will keep being added. Is there a way to change the color of the answer button when clicked and when clicked again it undo’s adding the value to the variable and changes the color back?
Code:
<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;
}
Also if you have multiple answers of one questions add a , between instead of a &?
