I'm trying to create a filter to see what shoe's fit people the best. I'm creating multiple questions and every time I press a button I want the value of that button to be added to my url variable. I can't seem to figure out how get the value of the button I press and add it to the url variable with an & between values. Can anybody help me?
var Test = [
[
'Whats your size?', ['41', 'url1'],
['42', 'url2'],
['43', 'url3']
],
[
'What color would you like?', ['Red', 'url1'],
['Blue', 'url2'],
['Yellow', 'url3'],
['Green', 'url4']
],
[
'What brand would you like?', ['Adidas', 'url1'],
['Nike', 'url2'],
['Puma', 'url3']
]
];
var url = '#';
count = 1;
var questionNumber = 0;
var button = document.getElementById('answer');
var question = document.getElementById('question');
var answerButton;
function check() {
//question
console.log(Test[questionNumber][0]);
for (let y = 1; y < Test[questionNumber].length; y++) {
// url
url = url + Test[questionNumber][y][1];
// button
var btn = document.createElement('button');
btn.value = Test[questionNumber][y][1];
btn.className = "filter_anwser";
btn.textContent = Test[questionNumber][y][0];
btn.setAttribute('data-el', 1);
button.appendChild(btn);
// class
answerButton = document.querySelectorAll('.filter_anwser');
// console.log(url);
}
// question
var txt = document.createElement('h1');
txt.textContent = Test[questionNumber][0];
question.appendChild(txt);
console.log(".....");
// adds 1 to question to see a different question
questionNumber++;
}<div id="question"></div>
<div id="answer"></div>
<button onclick="check()">Next</button>You can push and later generate the URL from the object
I would personally use size, brand etc instead of url1, url1,
function getLink(parms) {
return "https://wwww.yourserver.com/shoes#"+parms.join(",")
};
button.addEventListener("click",function(e) {
const tgt = e.target;
parms.push(tgt.value);
console.log(getLink(parms))
})
var Test = [
[
'Whats your size?', ['41', 'url1'],
['42', 'url2'],
['43', 'url3']
],
[
'What color would you like?', ['Red', 'url1'],
['Blue', 'url2'],
['Yellow', 'url3'],
['Green', 'url4']
],
[
'What brand would you like?', ['Adidas', 'url1'],
['Nike', 'url2'],
['Puma', 'url3']
]
];
// let parms = {};
let parms = []
count = 1;
var questionNumber = 0;
var button = document.getElementById('answer');
var question = document.getElementById('question');
var answerButton;
function getLink(parms) {
/* const url = new URL("https://wwww.yourserver.com/shoes");
for (let key in parms) {
url.searchParams.append(key,parms[key])
}
return url.toString()
*/
return "https://wwww.yourserver.com/shoes#"+parms.join(",")
};
button.addEventListener("click",function(e) {
const tgt = e.target;
//parms[tgt.value] = tgt.textContent;
parms.push(tgt.value);
console.log(getLink(parms))
})
function check() {
//question
// console.log(Test[questionNumber][0]);
for (let y = 1; y < Test[questionNumber].length; y++) {
// button
var btn = document.createElement('button');
btn.value = Test[questionNumber][y][1];
btn.className = "filter_anwser";
btn.textContent = Test[questionNumber][y][0];
btn.setAttribute('data-el', 1);
button.appendChild(btn);
// class
answerButton = document.querySelectorAll('.filter_anwser');
// console.log(url);
}
// question
var txt = document.createElement('h1');
txt.textContent = Test[questionNumber][0];
question.appendChild(txt);
// adds 1 to question to see a different question
questionNumber++;
}<div id="question"></div>
<div id="answer"></div>
<button onclick="check()">Next</button>Old answer
let parms = {};
function getLink(parms) {
const url = new URL("https://wwww.yourserver.com/product");
for (let key in parms) {
url.searchParams.append(key,parms[key])
}
return url.toString()
};
button.addEventListener("click",function(e) {
const tgt = e.target;
parms[tgt.value] = tgt.textContent;
console.log(getLink(parms))
})