I'm new to javascript and I have a program that counts from 1 to 100, checking each number if they are a multiple of three or five. If it is a multiple of three, the word Fizz is added to an array. If it is a multiple of five, Buzz is added to the array. If it is a multiple of both FizzBuzz is added to the array. Otherwise it just adds the number if it is multiple of neither. I believe it works, but I can't seem to get the output to show on the html page.
I tried adjusting the document.getElementById part in the javascript by doing things like
Any help would be appreciated!
HTML (file named index):
<!DOCTYPE html>
<html>
<head>
<title>Fizz Buzz Challenge</title>
<script src="fizzBuzz.js" charset="utf-8"></script>
</head>
<body>
<h2>The Fizz Buzz Test:</h2>
<div id = "output"> </div>
</body>
</html>
Javascript (file named fizzBuzz):
const result = [];
for(let i = 1; i <= 100; i++){
if(i % 3 === 0 && i % 5 === 0) {
result.push('FizzBuzz');
} //if end
else if (i % 3 === 0) {
result.push('Fizz');
} //else if end
else if (i % 5 === 0) {
result.push('Buzz');
} // else if end
else {
result.push(i);
} //else end
} //for
document.getElementById("output") = result.join();
Simply add .innerText or .innerHTML to document.getElementById("output")
Should be working, and great start the the old FizzBuzz algorithm.
Join the array elements using a line-break to the innerText of the output element.
Move the <script> call to just before the </body> tag so you allow the DOM to load before you try and cache the element.
const result = [];
for (let i = 1; i <= 100; i++) {
if (i % 3 === 0 && i % 5 === 0) {
result.push('FizzBuzz');
} else if (i % 3 === 0) {
result.push('Fizz');
} else if (i % 5 === 0) {
result.push('Buzz');
} else {
result.push(i);
}
}
document.getElementById("output").innerText = result.join('\n');<body>
<h2>The Fizz Buzz Test:</h2>
<div id="output"> </div>
</body>First, you have to assign the output to the text content of the element.
document.getElementById("output").textContent = result.join();
Another thing is that you have execute your script after the DOM is rendered. You can do this just by moving your script tag to the end of the body, so when the DOM is rendered, it will call you script.
<!DOCTYPE html>
<html>
<head>
<title>Fizz Buzz Challenge</title>
</head>
<body>
<h2>The Fizz Buzz Test:</h2>
<div id = "output"> </div>
<script src="fizzBuzz.js" charset="utf-8"></script>
</body>
</html>