如何在Javascript中生成多个新的HTML标签

Question

我正在编写一个涉及经典“ FizzBuzz”编码问题的小型练习程序。 我的目标是让用户输入两个数字，并在屏幕上打印Fizz，Buzz和FizzBuzz以及未分配这些特定单词的数字。

我编写了一个函数，该函数可以接收用户的数字并运行它们以输出数字和单词。 它可能并不漂亮，但是可以工作。 我已经在控制台中对其进行了测试。 我现在想做的是将输出打印到屏幕上。 我正在通过javascript创建<li>标记并将文本附加到它们。 然后，我将该列表项附加到html文档中已经存在的<ul>上。

这是我的HTML

<div class="main-container" id="main-container">

        <h1 class="title" id="title">Fizz Buzz</h1>

        <!-- first form container -->
        <div class="first-multiple-container" id="first-multiple-container">

            <h3 class="first-multiple-title" id="first-multiple-title">Enter First Multiple</h3>
            <textarea  id="text-area-1" rows="2" cols="10"></textarea>
        </div>

        <!-- second form container -->
        <div class="second-multiple-container" id="second-multiple-container">

            <h3 class="second-multiple-title" id="second-multiple-title">Enter Second Multiple</h3>
            <textarea  id="text-area-2" rows="2" cols="10"></textarea>
        </div>

        <div id="button-container">
          <div id="button">Print Values</div>
        </div>

        <div>
          <ul id="output"></ul>
        </div>

    </div>

这是我的Javascript代码

const text1 = document.getElementById('text-area-1');
const text2 = document.getElementById('text-area-2');
const output = document.getElementById('output');
const list = document.createElement('li');


function findValue(event, num1, num2) {

  let i = 1;

  while (i <= 30) {
    if (i % num1 == 0 && i % num2 == 0) {

      list.appendChild(document.createTextNode('FizzBuzz '));
      output.appendChild(list);

    } else if (i % num1 == 0) {

      list.appendChild(document.createTextNode('Fizz '));
      output.appendChild(list);

    } else if (i % num2 == 0) {

      list.appendChild(document.createTextNode('Buzz '));
      output.appendChild(list);

    } else {
      list.appendChild(document.createTextNode(i + ' '));
      output.appendChild(list);
    }

    i++;
  }
}

document.getElementById('button').addEventListener('click', function (evt) {
    findValue(evt, text1.value, text2.value);
  });

从某种意义上说，这段代码在将所有正确的输出打印到屏幕上，但全部都在一个<li>标签内，因此可以正常工作。 因此，它只是数字和单词的长横线。 我假设这种情况正在发生，因为我只创建了一个<li>标记，所有内容都被追加到该标记中。

是否可以为每个单词或数字创建新的<li>标签？ 还是在每个空格后都打破了界限？ 我希望将输出列在一条垂直线中，而不是一条长水平线中。

Answer 1

是的，问题在于您只创建了一个<li>标记，然后将每个单词或数字附加到该标记上。 我已经修改了您的代码，为每个生成的单词或数字创建一个新的<li>标记：

 document.addEventListener("DOMContentLoaded", function() { const text1 = document.getElementById('text-area-1'); const text2 = document.getElementById('text-area-2'); let output = document.getElementById('output'); function findValue(event, num1, num2) { let i = 1, list; while (i <= 30) { if (i % num1 == 0 && i % num2 == 0) { list = document.createElement('li'); list.innerHTML = 'FizzBuzz '; output.appendChild(list); } else if (i % num1 == 0) { list = document.createElement('li'); list.innerHTML = 'Fizz '; output.appendChild(list); } else if (i % num2 == 0) { list = document.createElement('li'); list.innerHTML = 'Buzz '; output.appendChild(list); } else { list = document.createElement('li'); list.innerHTML = i + ' '; output.appendChild(list); } i++; } } document.getElementById('button').addEventListener('click', function(evt) { findValue(evt, text1.value, text2.value); }); });

 <body> <div class="main-container" id="main-container"> <h1 class="title" id="title">Fizz Buzz</h1> <!-- first form container --> <div class="first-multiple-container" id="first-multiple-container"> <h3 class="first-multiple-title" id="first-multiple-title">Enter First Multiple</h3> <textarea id="text-area-1" rows="2" cols="10"></textarea> </div> <!-- second form container --> <div class="second-multiple-container" id="second-multiple-container"> <h3 class="second-multiple-title" id="second-multiple-title">Enter Second Multiple</h3> <textarea id="text-area-2" rows="2" cols="10"></textarea> </div> <div id="button-container"> <button id="button">Print Values</button> </div> <div> <ul id="output"></ul> </div> </div> </body>

对于上面的演示，我将#button从<div>变成了<button>以使其更容易告诉您应该单击它。

可以像下面这样简化while循环：

 while (i <= 30) { list = document.createElement('li'); if (i % num1 == 0 && i % num2 == 0) { list.innerHTML = 'FizzBuzz '; } else if (i % num1 == 0) { list.innerHTML = 'Fizz '; } else if (i % num2 == 0) { list.innerHTML = 'Buzz '; } else { list.innerHTML = i + ' '; } output.appendChild(list); i++; }

如何在Javascript中生成多个新的HTML标签

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-07-04 16:20:13

如何在Javascript中生成多个新的HTML标签

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-07-04 16:20:13

解决方案1
1 已采纳 2019-07-04 16:20:13