Javascript我如何動態地給一個變數我的按鈕的值？

我正在嘗試創建一個過濾器來查看哪種鞋子最適合人們。我正在創建多個問題，每次按下按鈕時，我都希望將該按鈕的值添加到我的 url 變數中。我似乎無法弄清楚如何獲取我按下的按鈕的值并將其添加到 url 變數中，并在值之間使用 & 。有誰能夠幫助我？

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>

uj5u.com熱心網友回復：

您可以推送并稍后從物件生成 URL

我個人會使用尺寸、品牌等而不是 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>

舊答案

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))
})

標籤：javascript html 变量 网址 按钮

上一篇：基于 軟體體系結構（第3版）考試重點和復習指南

下一篇：從帶有變數的URL在JavaScript中播放音頻