CODEWITHSUNDEEP
javascripthtml
notaverygoodprogrammer
notaverygoodprogrammer

Reputation: 3

can't get output from array in javascript file to show on html page

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();

Upvotes: 0

Views: 102

Answers (4)

HaukurHaf
HaukurHaf

Reputation: 13816

You cannot assign the value directly to the DOM element. Use the .innerText or .innerHTML properties.

Also, when the script runs, the div element you are trying to output to might not be present in the DOM. You might want to use the DOM ready event and run the script from there.

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

// Wait for the DOM to be ready and then output into the DIV
document.addEventListener('DOMContentLoaded', (event) => {
   document.getElementById("output").innerText = result.join();
})

Upvotes: 1

bobkorinek
bobkorinek

Reputation: 695

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>

Upvotes: 1

Andy
Andy

Reputation: 63587

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>

Upvotes: 1

Callum S
Callum S

Reputation: 221

Simply add .innerText or .innerHTML to document.getElementById("output")

Should be working, and great start the the old FizzBuzz algorithm.

Upvotes: 1

Related Questions