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))
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.