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>
3 answers
solution1
4 2016-03-19 17:33:47
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.
solution2
1 2016-03-19 17:41:03
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>
solution3
0 2018-05-08 14:58:55
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")
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.