Question

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

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

这是我的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 个答案: