JavaScript如何动态获取点击按钮的值并追加到url变量

完整修改代码 #

HTML代码 #

<div id="question"></div>
<div id="answer"></div>
<button onclick="check()">Next</button>

JS代码 #

var Test = [
  [
    '你的鞋码是多少？', ['41', 'url1'],
    ['42', 'url2'],
    ['43', 'url3']
  ],
  [
    '你想要什么颜色？', ['红色', 'url1'],
    ['蓝色', 'url2'],
    ['黄色', 'url3'],
    ['绿色', 'url4']
  ],
  [
    '你想要什么品牌？', ['阿迪达斯', 'url1'],
    ['耐克', 'url2'],
    ['彪马', 'url3']
  ]
];

// 初始化url
var url = '#';
var questionNumber = 0;
var buttonContainer = document.getElementById('answer');
var questionContainer = document.getElementById('question');
var nextBtn = document.querySelector('button[onclick="check()"]');

function check() {
  // 所有问题回答完毕，隐藏next按钮，终止执行
  if (questionNumber >= Test.length) {
    nextBtn.style.display = 'none';
    console.log('最终拼接完成的url：', url);
    return;
  }
  // 清空上一题的问题和选项
  questionContainer.innerHTML = '';
  buttonContainer.innerHTML = '';

  // 渲染当前问题
  var txt = document.createElement('h1');
  txt.textContent = Test[questionNumber][0];
  questionContainer.appendChild(txt);

  // 渲染当前问题的所有选项
  for (let y = 1; y < Test[questionNumber].length; y++) {
    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);
    // 绑定选项点击事件
    btn.addEventListener('click', function() {
      // 拼接url，自动处理&分隔符
      if (url === '#') {
        url += this.value;
      } else {
        url += '&' + this.value;
      }
      console.log('当前url：', url);
      // 禁用当前题所有选项，防止重复点击
      document.querySelectorAll('.filter_anwser').forEach(el => el.disabled = true);
    })
    buttonContainer.appendChild(btn);
  }

  questionNumber++;
}

核心改动说明 #

• 给每个选项按钮绑定了独立点击事件，点击时直接读取当前按钮的value值完成拼接，自动判断是否需要追加&分隔符，不会出现符号冗余错误。
• 移除了原有逻辑中一次性拼接所有选项值的错误代码，改为用户点击对应选项才追加对应值，符合选型交互逻辑。
• 新增同题选项点击后全局禁用逻辑，避免同一问题重复选择多次追加值。
• 新增下一题切换时清空上一题内容的逻辑，避免页面堆叠多轮无效内容。
• 新增题目边界判断，所有问题答完后自动隐藏next按钮，避免数组越界报错。

内容的提问来源于stack exchange，提问作者thijs