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>
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>
-
2
Sooo have you tried
document.write? – j08691 Commented Mar 19, 2016 at 17:31
3 Answers
Reset to default 4You 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.
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>step 1: create divCreator function,
which creates a div element,
adds a node to parent (body)
assigns it an id
so it bees 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: bine 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")
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744711322a4589360.html
评论列表（0条）