关于随机问答表格按钮功能嵌入位置的技术咨询（附JS代码）

看你提供的代码，最后一行document.getElementByI明显没写完，而且用固定ID逐个赋值的方式既繁琐又不利于按钮交互的绑定。我给你重新调整代码，改成动态生成表格行的方式，同时把答案切换按钮正确嵌入，完美实现默认隐藏答案、点击按钮切换可见性的功能：

完整实现代码 #

HTML部分 #

<div>
  <button onclick="generateQuestions()">生成新的问答列表</button>
  <table id="quizTable" border="1">
    <thead>
      <tr>
        <th>问题</th>
        <th>答案</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 动态生成的行将插入这里 -->
    </tbody>
  </table>
</div>

CSS部分 #

.answer-hidden {
  display: none;
}

JavaScript部分 #

// 问答数据数组
var myWords = [
  { wordName: 'Karaoke', wordAnswer: 'Karaoke カラオケ' },
  { wordName: 'Alcohol', wordAnswer: '(O-)sake（お）酒' },
  { wordName: 'Anime', wordAnswer: 'Anime アニメ' },
  { wordName: 'Cat', wordAnswer: 'Neko 猫' },
  { wordName: 'Sea', wordAnswer: 'Umi 海' },
  { wordName: 'Hill', wordAnswer: 'Oka 丘' },
  { wordName: 'Person', wordAnswer: 'Hito 人' },
  { wordName: 'Flower', wordAnswer: 'Hana 花' },
  { wordName: 'Mouth', wordAnswer: 'Kuchi 口' },
  { wordName: 'Ear', wordAnswer: 'Mimi 耳' },
  { wordName: 'Sun', wordAnswer: 'Hi/taiyō 日・太陽' },
  { wordName: 'Village', wordAnswer: 'Mura 村' },
  { wordName: 'Countryside', wordAnswer: 'Inaka 田舎' },
  { wordName: 'Name', wordAnswer: 'Namae 名前' },
  { wordName: 'King', wordAnswer: 'Ō 王' },
  { wordName: 'Gold', wordAnswer: 'Kin 金' },
  { wordName: 'School', wordAnswer: 'Gakkō 学校' },
  { wordName: 'Cloud', wordAnswer: 'Kumo 雲' },
  { wordName: 'Face', wordAnswer: 'Kao 顔' },
  { wordName: 'Ramen', wordAnswer: 'Rāmen ラーメン' },
  { wordName: 'Sushi', wordAnswer: 'Sushi 寿司' },
  { wordName: 'Manga', wordAnswer: 'Manga マンガ' },
  { wordName: 'Tea', wordAnswer: 'Ocha お茶' },
  { wordName: 'Fire', wordAnswer: 'Hi 火' },
  { wordName: 'Tree', wordAnswer: 'Ki 木' },
  { wordName: 'Car', wordAnswer: 'Kuruma 車' },
  { wordName: 'Sound', wordAnswer: 'Oto 音' },
  { wordName: 'Hand', wordAnswer: 'Te 手' },
  { wordName: 'Man', wordAnswer: 'Otoko 男' },
  { wordName: 'Stone', wordAnswer: 'Ishi 石' },
  { wordName: 'Town', wordAnswer: 'Machi 町' },
  { wordName: 'Ground', wordAnswer: 'Tsuchi 土' },
  { wordName: 'Strength', wordAnswer: 'Chikara 力' },
  { wordName: 'Queen', wordAnswer: 'Jo ō 女王' },
  { wordName: 'Silver ', wordAnswer: 'Gin 銀' },
  { wordName: 'Thread', wordAnswer: 'Ito 糸' },
  { wordName: 'Song ', wordAnswer: 'Uta 歌' },
  { wordName: 'Cow', wordAnswer: 'Ushi 牛' },
  { wordName: 'Karate', wordAnswer: 'Karate 空手' },
  { wordName: 'Mountain', wordAnswer: 'Yama 山' },
  { wordName: 'Dog', wordAnswer: 'Inu 犬' },
  { wordName: 'Water', wordAnswer: 'Mizu 水' },
  { wordName: 'Bamboo', wordAnswer: 'Take 竹' },
  { wordName: 'Grass', wordAnswer: 'Kusa 草' },
  { wordName: 'Yen', wordAnswer: 'En 円' },
  { wordName: 'Sky', wordAnswer: 'Sora 空' },
  { wordName: 'Leg/foot', wordAnswer: 'Ashi 脚・足' },
  { wordName: 'Woman', wordAnswer: 'On na 女' },
  { wordName: 'River', wordAnswer: 'Kawa 川' },
  { wordName: 'Bug', wordAnswer: 'Mushi 虫' },
  { wordName: 'Book', wordAnswer: 'Hon 本 ' },
  { wordName: 'Eye(s)', wordAnswer: 'Me 目 ' },
  { wordName: 'Rain', wordAnswer: 'Ame 雨' },
  { wordName: 'Money', wordAnswer: 'Okane お金' },
  { wordName: 'Year', wordAnswer: 'Toshi 年' },
  { wordName: 'Fish', wordAnswer: 'Sakana 魚' },
  { wordName: 'Shape', wordAnswer: 'Katachi 形' }
];

function generateQuestions() {
  // 随机挑选10个不重复的问答项
  var selectWords = [];
  while (selectWords.length < 10) {
    var randomIndex = Math.floor(Math.random() * myWords.length);
    var randomWord = myWords[randomIndex];
    // 检查是否已选中，避免重复
    if (!selectWords.some(item => item.wordName === randomWord.wordName)) {
      selectWords.push(randomWord);
    }
  }

  // 获取表格tbody元素，清空原有内容
  var tableBody = document.getElementById('quizTable').querySelector('tbody');
  tableBody.innerHTML = '';

  // 动态生成每行内容
  selectWords.forEach(word => {
    var row = document.createElement('tr');
    
    // 问题单元格
    var questionCell = document.createElement('td');
    questionCell.textContent = word.wordName;
    row.appendChild(questionCell);

    // 答案单元格，默认隐藏
    var answerCell = document.createElement('td');
    answerCell.textContent = word.wordAnswer;
    answerCell.classList.add('answer-hidden');
    row.appendChild(answerCell);

    // 按钮单元格
    var buttonCell = document.createElement('td');
    var toggleBtn = document.createElement('button');
    toggleBtn.textContent = '显示答案';
    // 绑定点击事件，切换答案可见性
    toggleBtn.addEventListener('click', function() {
      answerCell.classList.toggle('answer-hidden');
      this.textContent = answerCell.classList.contains('answer-hidden') ? '显示答案' : '隐藏答案';
    });
    buttonCell.appendChild(toggleBtn);
    row.appendChild(buttonCell);

    // 将行添加到tbody
    tableBody.appendChild(row);
  });
}

// 页面加载时默认生成一次列表
window.onload = generateQuestions;

关键说明 #

1. 按钮的正确嵌入位置：在动态生成表格行的过程中，为每行单独创建按钮，并直接把点击事件绑定到该按钮上，这样每个按钮都能精准控制当前行的答案显示/隐藏，不会出现混淆。
2. 答案隐藏实现：用CSS类.answer-hidden控制display: none，点击按钮时通过classList.toggle()切换类，比直接修改style更灵活易维护。
3. 修复原代码问题：原代码最后未完成，且用固定ID逐个赋值的方式扩展性差，改成动态生成行后，不管生成多少条数据都能适配，也避免了ID重复的问题。
4. 去重逻辑优化：原代码用indexOf判断对象是否存在数组中会失效（因为对象是引用类型），改成用some()检查wordName是否重复，确保选中的问答不重复。

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