How to output javascript to a page

Question

I've been tasked with the classic Fizz-Buzz problem. Writing the JS isn't that hard, but I'm struggling with linking to my HTML and outputting it to a page. I'm pretty sure I should be using document.write...

js

function fizzBuzz(){
   for(var i=1;i<=100;i++){
      if(i%5 === 0 && i%3 === 0){
          print('FizzBuzz');
      } else if(i%3 === 0){
        print('Fizz');
      } else if(i%5 === 0){
        print('Buzz');
      } else {
        print(i);
    }
  }
}

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>FizzBuzz</title>
        <script src="js/app.js"></script>
    </head>
    <body>

Sooo have you tried `document.write`? – j08691 Mar 19 '16 at 17:31 — j08691, Mar 19 '16 at 17:31

score 4 · Answer 1 · edited May 23 '17 at 12:01

4

You should avoid using document.write (there are tons of resources about that), but instead, you should populate an HTML element, for example:

function fizzBuzz(){
  for(var i=1;i<=100;i++){
    if(i%5 === 0 && i%3 === 0){
        print('FizzBuzz');
    } else if(i%3 === 0){
        print('Fizz');
    } else if(i%5 === 0){
        print('Buzz');
    } else {
        print(i);
    }
  }
}

var r = document.getElementById('result');

function print(s){
  r.innerHTML += s + '<br>';
}

fizzBuzz();

<div id="result"></div>

I didn't touch your original code, I've just implemented a print function which adds the parameter s and the line break to the existing HTML of the #result div.

edited May 23 '17 at 12:01

Community

1
1

answered Mar 19 '16 at 17:33

Shomz

36,161
3
52
81

A function I've implemented (the name chosen by the OP), you can see it both in the code and in the answer description. @epascarello – Shomz Mar 19 '16 at 17:36
hey how do you add that "run code snippet" thing? instead of linking to jsfiddle, etc – roberto tomás Mar 19 '16 at 17:42
1

@robertotomás, you can use the button in the toolbar: https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ – Shomz Mar 19 '16 at 17:44
@robertotomás, when you post an answer, this will be placed when you create a snippet of executable code. – Obinna Nwakwue Mar 19 '16 at 17:44

score 1 · Answer 2 · edited Mar 26 '16 at 09:13

add to html

<!-- this is inside the <body> tag -->
<div id="content"></div>

You might ask, why add a div#content in the body? This is following a design principle called separation of concerns. The body should specify details about the visible rendered page, and its contents should be specified separately.

add to javascript

function myprint(output) { // replace your calls to _print_ with _myprint_
  var p = document.createElement("p"); // Create a <p> element
  var t = document.createTextNode(output); // Create a text node
  p.appendChild(t);
  document.getElementById("content").appendChild(p);
}

(function() {
  // your page initialization code here
  // the DOM will be available here
  fizzBuzz();
})();

runnable snippet

function fizzBuzz() {
  for (var i = 1; i <= 100; i++) {
    if (i % 5 === 0 && i % 3 === 0) {
      myprint('FizzBuzz');
    } else if (i % 3 === 0) {
      myprint('Fizz');
    } else if (i % 5 === 0) {
      myprint('Buzz');
    } else {
      myprint(i);
    }
  }
}

function myprint(output) { // replace your calls to _print_ with _myprint_
  var p = document.createElement("p"); // Create a <p> element
  var t = document.createTextNode(output); // Create a text node
  p.appendChild(t);
  document.getElementById("content").appendChild(p);
}

(function() {
  // your page initialization code here
  // the DOM will be available here
  fizzBuzz();
})();

<body>
  <style>#content > p {margin: 0.1em; padding:0.2em; background-color:#eee } #content > p:nth-child(2n) { background-color:#ddd }</style>
  <div id="content">
  </div>
</body>

hey what gives with the downvote? my answer works, I started on it before Shomz had replied, and in fact my answer was different at least before he edited his if not still. There's nothing wrong with my answer, no need to downvote people just because they didn't finish writing as quickly as someone else. — roberto tomás, Mar 19 '16 at 17:49
Some idiot is downvoting everything... it happens, I also got one. — Shomz, Mar 19 '16 at 18:44

wly185 · Answer 3 · 2018-05-08T15:09:39.553

step 1: create divCreator function,
which creates a div element,
adds a node to parent (body)
assigns it an id
so it becomes targetable
no need to create divs on the html side

var divCreator = function(id) {
//create an element
newElement = document.createElement("div");
//append the element to a node
//the parent node is the body
newNode = document.body.appendChild(newElement)
//give your new div an id
//using setAttribute
newNode.setAttribute("id", id);
}

step 2: textAdder
add text to your target

var textAdder = function(id, text) {
//target
target = document.getElementById(id); 
//add a text node to your target
target.appendChild(document.createTextNode(text));
}

test for divCreator and textAdder

divCreator("div1");
textAdder("div1", "test for divCreator and textAdder");

step 3: combine divCReator and textAdder to create printer
printer prints output to the browser
easier to use than console.log

var printer = function(id, text) {
newElement = document.createElement("div");
newNode = document.body.appendChild(newElement);
newNode.setAttribute("id", id);
target = document.getElementById(id)
target.appendChild(document.createTextNode(text));
}

test for printer

printer("div2", "test for printer")

How to output javascript to a page

3 Answers3

add to html

add to javascript

runnable snippet