FizzBuzz textContent issue

Я использую старое упражнение FizzBuzz и использую textContent, пытаясь загрузить страницу с каждым из значений, перечисленных один за другим, по вертикали. Сейчас я получаю вместо этого:FizzBuzz textContent issue

12Fizz4BuzzFizz78FizzBuzz11Fizz1314FizzBuzz1617Fizz19BuzzFizz2223FizzBuzz26Fizz2829FizzBuzz3132Fizz34BuzzFizz3738FizzBuzz41Fizz4344FizzBuzz4647Fizz49BuzzFizz5253FizzBuzz56Fizz5859FizzBuzz6162Fizz64BuzzFizz6768FizzBuzz71Fizz7374FizzBuzz7677Fizz79BuzzFizz8283FizzBuzz86Fizz8889FizzBuzz9192Fizz94BuzzFizz9798FizzBuzz

Вот мой код:

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

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <p class="container"></p> 
 
</body> 
 
</html>

источник

2015-07-17 learningnow

Может быть так просто, как добавление разрыва строки к каждому "Fizz", "Buzz", "FizzBuzz", или номер? – shoover

Не используйте textContent, так как он не содержит никакого форматирования. Используйте innerHTML и положите <br> теги после каждого элемента.

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

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <p class="container"></p> 
 
</body> 
 
</html>

источник

2015-07-17 22:26:30 Barmar

Ahh. Очень признателен! – learningnow

FizzBuzz textContent issue

ответ

Смежные вопросы