FizzBu​​zz textContent问题

时间:2015-07-17 22:21:37

标签: javascript html fizzbuzz

我正在使用旧的FizzBu​​zz练习,并使用textContent,试图加载一个页面,其中每个值都是一个接一个地垂直列出。现在我得到了这个:

  

12Fizz4BuzzFizz78FizzBu​​zz11Fizz1314FizzBu​​zz1617Fizz19BuzzFizz2223FizzBu​​zz26Fizz2829FizzBu​​zz3132Fizz34BuzzFizz3738FizzBu​​zz41Fizz4344FizzBu​​zz4647Fizz49BuzzFizz5253FizzBu​​zz56Fizz5859FizzBu​​zz6162Fizz64BuzzFizz6768FizzBu​​zz71Fizz7374FizzBu​​zz7677Fizz79BuzzFizz8283FizzBu​​zz86Fizz8889FizzBu​​zz9192Fizz94BuzzFizz9798FizzBu​​zz

这是我的代码:



var n = 1, str = ""

while (n <= 100) {
  if (n % 3 === 0 && n % 5 === 0) {
    str = str + "FizzBuzz"
  } else if (n % 3 === 0) {
    str = str + "Fizz"
  } else if (n % 5 === 0) {
    str = str + "Buzz"
  }
  else {
    str = str + n
  }
  n++
}

document.querySelector(".container").textContent = str
&#13;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p class="container"></p>
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

请勿使用textContent,因为它不包含任何格式。使用innerHTML并在每个项目后添加<br>个标记。

&#13;
&#13;
var n = 1, str = ""

while (n <= 100) {
  if (n % 3 === 0 && n % 5 === 0) {
    str = str + "FizzBuzz<br>";
  } else if (n % 3 === 0) {
    str = str + "Fizz<br>";
  } else if (n % 5 === 0) {
    str = str + "Buzz<br>";
  }
  else {
    str = str + n + '<br>';
  }
  n++;
}

document.querySelector(".container").innerHTML = str
&#13;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p class="container"></p>
</body>
</html>
&#13;
&#13;
&#13;