CODEWITHSUNDEEP
javascripthtml
Aurora
Aurora

Reputation: 23

Print one number at a time

I am trying to print each Fibonacci number at a time. How do I print the element every time I click on the button? Right now it runs into [object HTMLParagraphElement] error. 

 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>

Upvotes: 1

Views: 111

Answers (3)

akinuri
akinuri

Reputation: 12027

document.write replaces/overwrites the whole content of the page. Instead, you should use parentElement.appendChild(). And in this case, it's document.body.appendChild()

There is another problem. In your showNumber function, you use calcFib(1) which will return the same number every time you call it. You need to increment the number you pass into calcFib function, so you can get the rest of the sequence.

Examine the following code

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
}
<div id="hello">Calculate Fibonacci's numbers</div>
<button id="button" value="button" onclick="showNumber()">Calculate</button>

Upvotes: 0

John Rhodes
John Rhodes

Reputation: 3

Please don't use 

document.write()

Instead, add

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

and use this code below: 

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

The use: 

print(calcFib(1));

in your function showNumber

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

Upvotes: 0

rphv
rphv

Reputation: 5537

Change 

document.write(newEl);

to

document.body.appendChild(newEl);

Upvotes: 4

Related Questions