如何将javascript输出到页面

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 （关于它的资源有很多），而是应该填充一个 HTML 元素，例如：

 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>

我没有接触你的原始代码，我刚刚实现了一个print函数，它将参数s和换行符添加到#result div 的现有 HTML 中。

Answer 2

添加到 html

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

你可能会问，为什么要在正文中添加一个 div#content 呢？ 这遵循称为关注点分离的设计原则。 正文应指定有关可见呈现页面的详细信息，其内容应单独指定。

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

可运行片段

 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>

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 个解决方案

解决方案1
4 2016-03-19 17:33:47

解决方案2
1 2016-03-19 17:41:03

添加到 html

添加到javascript

可运行片段

解决方案3
0 2018-05-08 14:58:55

如何将javascript输出到页面

问题描述

3 个解决方案

解决方案1 4 2016-03-19 17:33:47

解决方案2 1 2016-03-19 17:41:03

添加到 html

添加到javascript

可运行片段

解决方案3 0 2018-05-08 14:58:55

解决方案1
4 2016-03-19 17:33:47

解决方案2
1 2016-03-19 17:41:03

解决方案3
0 2018-05-08 14:58:55