Javascript 在这种情况下，如何停止重复代码？_Javascript_Html

Javascript 在这种情况下，如何停止重复代码？

javascript html

Javascript 在这种情况下，如何停止重复代码？,javascript,html,Javascript,Html,我正在尝试用琐事API构建一个简单的游戏，下面是我的html代码： <body> <div class="container-fluid row"> <div class="col question"> <h5>Question</h5> <h2 class="text-primary">0/5</h2> </div&g

我正在尝试用琐事API构建一个简单的游戏，下面是我的html代码：

<body>
    <div class="container-fluid row">
        <div class="col question">
            <h5>Question</h5>
            <h2 class="text-primary">0/5</h2>
        </div>
        <div class="col score text-right">
            <h5>Score</h5>
            <h2 class="text-primary">0</h2>
        </div>
    </div>
    <div class="container bg-light">
        <h1 class="display-3" id="questions"> What is the answer to this question? </h1>
        <div class="info-question">
            <div class="choice" id="1"></div>

            <div class="choice" id="2"></div>

            <div class="choice" id="3"></div>

            <div class="choice" id="4"></div>

        </div>
    </div>

    <script src="/trivia/trivia.js"></script>
</body>

我试图循环回答结果问题，但不知道如何开始，从哪里开始？

我感谢每一个答案

您可以这样做：

<div class="info-question">
        <div class="choice ques" id="1"></div>

        <div class="choice ques" id="2"></div>

        <div class="choice ques" id="3"></div>

        <div class="choice ques" id="4"></div>

    </div>

确保您应该有一个仅用于提问的唯一类，在这种情况下，您需要创建一个用作模板的函数。您可以在js文件中定义html结构

function getQuestionHTML(question, index){
  return `<div class="choice" id="${index}">${question}</div>`
}

const questionsInfoEl = docuement.querySelector('info-question');
fetch(`https://opentdb.com/api.php?amount=5&category=9&difficulty=easy&type=multiple`)
    .then((response) => response.json())
    .then(({
        results,
    }) => {
      const questionHTMLList = results.map((data, index) => getQuestionHTML(data.question, index));
      questionsInfoEl.insertAdjacentHTML('afterend', questionHTMLList.join(''));
    });

函数getQuestionHTML（问题，索引）{ 返回`${question}` } const questionsInfoEl=docuement.querySelector（'info-question'）；取回(`https://opentdb.com/api.php?amount=5&category=9&difficulty=easy&type=multiple`) .then（（response）=>response.json（）） .那么(({ 后果 }) => { const questionhtmlist=results.map（（数据，索引）=>getQuestionHTML（数据，问题，索引））； questionsInfoEl.insertAdjacentHTML（'afterend'，questionhtmlist.join（''）； });

如果您有动态结果，您可能不希望初始化包含结果但仅包含容器的

div

：

const containerEl = document.getElementById('choices-container');

fetch(`https://opentdb.com/api.php?amount=5&category=9&difficulty=easy&type=multiple`)
    .then((response) => response.json())
    .then(({
        results,
    }) => {
        results.map((result, idx) => {
          const node = document.createElement('div')
          node.textContent = `Question ${idx + 1}: ${result.question}`
          node.classList.add('choice')
          containerEl.append(node)
        })
    });

同时更新html：

更改后，您的HTML和js文件将如下所示

<body>
  <div class="container-fluid row">
     <div class="col question">
         <h5>Question</h5>
         <h2 class="text-primary">0/5</h2>
     </div>
     <div class="col score text-right">
         <h5>Score</h5>
         <h2 class="text-primary">0</h2>
    </div>
  </div>
  <div class="container bg-light">
     <h1 class="display-3" id="questions"> What is the answer to this question? </h1>
     <div class="info-question"></div>
 </div>
 <script src="/trivia/trivia.js"></script>

对ID使用数字通常不是最佳做法。@jmargolisvt只有在代码运行后才使用，但事实并非如此@不幸的是，PO的实际问题是关于改进，而不是修复它。@jmargolisvt这并不能作为错误建议的借口。拜托，代码审查已经有足够多的糟糕问题了。

const containerEl = document.getElementById('choices-container');

fetch(`https://opentdb.com/api.php?amount=5&category=9&difficulty=easy&type=multiple`)
    .then((response) => response.json())
    .then(({
        results,
    }) => {
        results.map((result, idx) => {
          const node = document.createElement('div')
          node.textContent = `Question ${idx + 1}: ${result.question}`
          node.classList.add('choice')
          containerEl.append(node)
        })
    });

<body>
  <div class="container-fluid row">
     <div class="col question">
         <h5>Question</h5>
         <h2 class="text-primary">0/5</h2>
     </div>
     <div class="col score text-right">
         <h5>Score</h5>
         <h2 class="text-primary">0</h2>
    </div>
  </div>
  <div class="container bg-light">
     <h1 class="display-3" id="questions"> What is the answer to this question? </h1>
     <div class="info-question"></div>
 </div>
 <script src="/trivia/trivia.js"></script>

let questions = document.querySelector('.info-question');
fetch(`https://opentdb.com/api.php?amount=5&category=9&difficulty=easy&type=multiple`)
    .then((response) => response.json())
    .then(({results}) => {
        let fragment = document.createDocumentFragment();
        results.forEach((data,index)=>{
            let div = document.createElement('div');
           div.textContent = `Question ${index+1}: ${data.question}`;
           div.className = 'choice';
           div.id = index;
           fragment.appendChild(div);
        })
        questions.appendChild(fragment);

    });