javascript - 生成按钮

标签 javascript button

我正在尝试创建一个随机生成问题列表及其相应答案的表格。

对于答案，我希望它默认隐藏，但在每个答案行中都有一个按钮来切换可见性:

问题 | (显示答案按钮)

但是，当我插入按钮时，代码中断并且我无法生成问题列表。谁能告诉我应该在哪里包含按钮功能？提前致谢!

//Array of Words
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() {
  //New Array for Selected Words
  var selectWords = []

  //randomly pick 10 words
  while (selectWords.length < 10) {
    var randomWord = myWords[Math.floor(Math.random() * myWords.length)]
    if (selectWords.indexOf(randomWord) > -1) continue;
    selectWords[selectWords.length] = randomWord;
  }

  //get selected questions
  document.getElementById("wordA").innerHTML = selectWords[0].wordName;
  document.getElementById("wordB").innerHTML = selectWords[1].wordName;
  document.getElementById("wordC").innerHTML = selectWords[2].wordName;
  document.getElementById("wordD").innerHTML = selectWords[3].wordName;
  document.getElementById("wordE").innerHTML = selectWords[4].wordName;
  document.getElementById("wordF").innerHTML = selectWords[5].wordName;
  document.getElementById("wordG").innerHTML = selectWords[6].wordName;
  document.getElementById("wordH").innerHTML = selectWords[7].wordName;
  document.getElementById("wordI").innerHTML = selectWords[8].wordName;
  document.getElementById("wordJ").innerHTML = selectWords[9].wordName;

  //get selected answers
  document.getElementById("answerA").innerHTML = selectWords[0].wordAnswer;
  document.getElementById("answerB").innerHTML = selectWords[1].wordAnswer;
  document.getElementById("answerC").innerHTML = selectWords[2].wordAnswer;
  document.getElementById("answerD").innerHTML = selectWords[3].wordAnswer;
  document.getElementById("answerE").innerHTML = selectWords[4].wordAnswer;
  document.getElementById("answerF").innerHTML = selectWords[5].wordAnswer;
  document.getElementById("answerG").innerHTML = selectWords[6].wordAnswer;
  document.getElementById("answerH").innerHTML = selectWords[7].wordAnswer;
  document.getElementById("answerI").innerHTML = selectWords[8].wordAnswer;
  document.getElementById("answerJ").innerHTML = selectWords[9].wordAnswer;
}

function showAnswer() {
  var button = document.getElementById("wordA");
  if (button.style.display === "none") {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
}
<!–– Question Table ––>
<table id="qAndA">
  <tr>
    <th>Word</th>
    <th>Answer</th>
  </tr>
  <tr>
    <td id="wordA">Word</td>
    <!–– Word A ––>
    <td id="answerRow">
      <div id="answerA">Answer</div>
    </td>
  </tr>
  <tr>
    <td id="wordB">Word</td>
    <!–– Word B ––>
    <td id="answerRow">
      <div id="answerB">Answer</div>
    </td>
  </tr>
  <tr>
    <td id="wordC">Word</td>
    <!–– Word C ––>
    <td id="answerRow">
      <div id="answerC">Answer</div>
    </td>
  </tr>
  <tr>
    <td id="wordD">Word</td>
    <!–– Word D ––>
    <td id="answerRow">
      <div id="answerD">Answer</div>
    </td>
  </tr>
  <tr>
    <td id="wordE">Word</td>
    <!–– Word E ––>
    <td id="answerRow">
      <div id="answerE">Answer</div>
    </td>
  </tr>
  <tr>
    <td id="wordF">Word</td>
    <!–– Word F ––>
    <td id="answerRow">
      <div id="answerF">Answer</div>
    </td>
  </tr>
  <tr>
    <td id="wordG">Word</td>
    <!–– Word G ––>
    <td id="answerRow">
      <div id="answerG">Answer</div>
    </td>
  </tr>
  <tr>
    <td id="wordH">Word</td>
    <!–– Word H ––>
    <td id="answerRow">
      <div id="answerH">Answer</div>
    </td>
  </tr>
  <tr>
    <td id="wordI">Word</td>
    <!–– Word I ––>
    <td id="answerRow">
      <div id="answerI">Answer</div>
    </td>
  </tr>
  <tr>
    <td id="wordJ">Word</td>
    <!–– Word J ––>
    <td id="answerRow">
      <div id="answerJ">Answer</div>
    </td>
  </tr>
</table>

<!–– Generate Questions ––>
<button type="button" onclick="generateQuestions()">Generate Questions</button>

最佳答案

不要重复自己!一旦你看到像你的

这样的代码块 
document.getElementById("A").innerHTML = selectWords[0].wordName;
document.getElementById("B").innerHTML = selectWords[1].wordName;
document.getElementById("C").innerHTML = selectWords[2].wordName;
docum.... Wait... there must be a better way....

很明显，有更简洁的方法。因此删除你的 <tbody>完整地和那些 innerHTML block 。实际上，整张 table 。相反:

const EL_QA = document.getElementById("qAndA");
const EL_btn = document.getElementById("generateQ");
const Template_table = rows => {
  return `
    <table>
      <thead>
        <tr>
          <th>Word</th>
          <th>Answer</th>
        </tr>
      </thead>
      <tbody>
        ${rows}
      </tbody>
    </table>
  `;
}

EL_btn.addEventListener("click", generateQuestions);

function generateQuestions() {

  // randomly pick 10 words
  let selectWords = [];
  while (selectWords.length < 10) {
    var randomWord = myWords[Math.floor(Math.random() * myWords.length)]
    if (selectWords.indexOf(randomWord) > -1) continue;
    selectWords[selectWords.length] = randomWord;
  }

  // Remove existing table (if any)
  if (EL_QA.getElementsByTagName("table")[0]) {
    EL_QA.removeChild(EL_QA.getElementsByTagName("table")[0]);
  }

  // Dynamically create the table string
  // Insert rows into table template:
  const tableString = Template_table(selectWords.reduce((str, word) => str += `
    <tr>
      <td>
        ${word.wordName}
      </td>
      <td>
        <button onclick="this.textContent='${word.wordAnswer}'">SHOW ANSWER</button>
      </td>
    </tr>
  `, ""));
      
  // Convert table string to Node and wrap the into DOM document
  const EL_table = (new DOMParser).parseFromString(tableString, "text/html")
    .documentElement.querySelector("table");

  // Insert the newly created table
  EL_QA.appendChild(document.adoptNode(EL_table));
}


const 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 形'
  }
];
<button type="button" id="generateQ">Generate Questions</button>
<div id="qAndA"></div>

现在只需要设置样式 #qAndA button { /* styles here */ }元素。

关于javascript - 生成按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50433988/

上一篇：javascript - 如果使用 document.createElement 创建的视频元素在没有附加到页面的情况下播放，何时会被垃圾收集？

下一篇：javascript - 如何在没有 ReactJS 的情况下使用 Shopify Polaris？

相关文章：

翻译后JavaScript旋转错误

javascript - 更新以响应 16.2.0 时的碎片不起作用

单击按钮时的android复选标记

wpf - 在 XAML 中设置 WPF ContextMenu 的 PlacementTarget 属性？

python - 避免调整 Tkinter OptionMenu 按钮的大小

javascript - 每当文本字段动态为空时禁用按钮

python - Tkinter - 新窗口上的按钮

javascript - 为什么此表单不发布数据？

javascript - 如何捕获我正在使用的 result() 回调函数的返回值？

javascript - 如何在javascript中验证电子邮件字段？

©2024 IT工具网  联系我们