Aurora Brignola February 2016

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>

Answers


rphv February 2016

Change

document.write(newEl);

to

document.body.appendChild(newEl);


John Rhodes February 2016

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>


akinuri February 2016

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>

Post Status

Asked in February 2016
Viewed 1,183 times
Voted 9
Answered 3 times

Search




Leave an answer