Question

我的任务是经典的Fizz-Buzz问题。编写JS并不难，但我正在努力链接到我的HTML并将其输出到页面。我很确定我应该使用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>

Answer 1

您应该避免使用document.write（there are tons of resources about that），而应该填充HTML元素，例如：

＆＃13;

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

＆＃13;

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

＆＃13;

我没有触及原始代码，我刚刚实现了print函数，该函数将参数s和换行符添加到{{1的现有HTML } div。

Answer 2

添加到html

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

您可能会问，为什么在正文中添加div＃内容？以下是此内容一种名为separation of concerns的设计原则。正文应指定有关可见渲染页面的详细信息，其内容应单独指定。

添加到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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

第1步：创建divCreator函数，
这会创建一个div元素，
将节点添加到父（正文）
给它一个id 所以它成为可定位的不需要在html端创建div

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

第2步：textAdder
向目标添加文字

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

测试divCreator和textAdder

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

步骤3：结合divCReator和textAdder创建打印机
打印机将输出打印到浏览器
比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));
}

测试打印机

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

如何将javascript输出到页面

3 个答案:

添加到html

添加到javascript

runnable snippet