Question

我正在尝试一次打印每个斐波那契数字。每次单击按钮时如何打印元素？现在它遇到[object HTMLParagraphElement]错误。

 function calcFib(number) {
   if (number == 0)
     return 0;
   else if (number == 1)
     return 1;
   else
     return calcFib(number - 1) + calcFib(number - 2);
 }

 function showNumber() {
   var newEl = document.createElement("p");
   var node = document.createTextNode(calcFib(1));
   newEl.appendChild(node);



   document.write(newEl);
 }

 //  document.getElementById("print").onclick = showNumber();

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="hello">Calculate Fibonacci's numbers</div>
  <button id="button" value="button" onclick="showNumber()">Calculate</button>
</body>

</html>

Answer 1

更改

document.write(newEl);

到

document.body.appendChild(newEl);

Answer 2

请不要使用

document.write()

相反，添加

<p id = "text"> </p>

并使用以下代码：

function print(msg) {
    document.getElementById("text").innerHTML += "<br> </br> " + msg;
}

使用：

print(calcFib(1));

在您的函数showNumber

中

＆＃13;

function calcFib(number) {
  if (number == 0) 
    return 0; 
  else if (number == 1) 
    return 1; 
  else 
    return calcFib(number - 1) + calcFib(number - 2); 
} 
function print(msg) {
  document.getElementById("text").innerHTML += "<br> </br> " + msg;
}
function showNumber() { 
  var newEl = document.createElement("p"); 
  var node = document.createTextNode(calcFib(1)); 
  newEl.appendChild(node);
  //document.write(newEl); 
  print(calcFib(1));
}

＆＃13;

<!DOCTYPE html>
<html>
  <head></head>
  <body>
      <div id="hello">Calculate Fibonacci's numbers</div>
      <button id="button" value="button" onclick="showNumber()">Calculate</button>
      <p id = "text"> </p>
  </body>
</html>

＆＃13;

Answer 3

document.write替换/覆盖页面的全部内容。相反，您应该使用parentElement.appendChild()。在这种情况下，它是document.body.appendChild()

还有另一个问题。在showNumber功能中，您使用calcFib(1)，每次调用时都会返回相同的数字。您需要增加传递给calcFib函数的数字，这样您就可以获得序列的其余部分。

检查以下代码

＆＃13;

function calcFib(number) {
  if (number == 0)
    return 0;
  else if (number == 1)
    return 1;
  else
    return calcFib(number - 1) + calcFib(number - 2);
}

var counter = 0;

function showNumber() {
  var newEl = document.createElement("p");
  var node = document.createTextNode(calcFib(counter));
  newEl.appendChild(node);
  document.body.appendChild(newEl);
  counter++; // increments counter by 1
}

＆＃13;

<div id="hello">Calculate Fibonacci's numbers</div>
<button id="button" value="button" onclick="showNumber()">Calculate</button>

＆＃13;

一次打印一个号码

3 个答案: