How to replace an appendChild instead of it adding to the previous appendChild?

Question

I created a simple simple javascript program where when I click two buttons that I generate random numbers and the third button allows me to sum the two numbers up and then I can reset.

Codepen with update

<html lang="en">
<head>
<title>createTextNode example</title>
</head>

<body>
  <button onclick="addTextNode1('Hi!');">N. 1</button>
  <button onclick="addTextNode('NO! ');">N. 2</button>
  <button onclick="test2('NO!.. ');">A! </button>
<button onclick="myFunction3()">Reset page</button>
  <hr />
  <p id="p2">1: </p>
  <p id="p1">2: </p>
  <p id="p3">T: </p>
</body>
</html>

function addTextNode(simple1) {
  text1 = Math.floor((Math.random() * 100) + 1);
  var newtext = document.createTextNode(text1+"     "),
      p1 = document.getElementById("p1");

  p1.appendChild(newtext);
}

function addTextNode1(simple2) {
  text2 = Math.floor((Math.random() * 100) + 1);
  var newtext = document.createTextNode(text2+"     "),
      p2 = document.getElementById("p2");

  p2.appendChild(newtext);
}


function myFunction3() {
    window.location.reload(true);
}

function test2() {
    text5 = text1 + text2;
    var newtext5 = document.createTextNode(text5),
      p3 = document.getElementById("p3");

     p3.appendChild(newtext5);
}

My question is how would I be able to replace the number that was newly displayed by the button by the appendChild method, so that when I click the button again the previous number gets replaced.

Thanks! Much appreciate!

You wouldn't want to do an append since that adds to the end of whatever is there. You would want to find what is in the element and replace it instead of append it. You could test to see if it already exists, if not, run what you have, if so, replace instead of append. — Difster, Jun 25 '17 at 16:23
One option would be to use `.text()` and replace the whole content - eg `p3.text("T: " + newtext5)`. — freedomn-m, Jun 25 '17 at 16:27
A better option would be some slight changes to your html to provide a place where the text is to go, eg `
T:
` then `$("p3>span").text(newtext5)` — freedomn-m, Jun 25 '17 at 16:28
Thanks! I think I will use `$("#1").text(text1);` and have `

` — S.Doe_Dude, Jun 25 '17 at 17:22

score 0 · Answer 1 · answered Jun 25 '17 at 17:21

Here an example for the second number.Same for the other:

function addTextNode(simple1) {
  
  text1 = Math.floor((Math.random() * 100) + 1);
  var newtext = document.createTextNode(text1+"     "),
      p1 = document.getElementById("p1");
  var p1Txt=p1.innerHTML; 
  var a=p1Txt.length;
  if(a>=3){
  p1.innerHTML='2: ';  
  p1.appendChild(newtext);
  }else{
    p1.appendChild(newtext);  
  }

score 0 · Answer 2 · answered Jun 25 '17 at 17:52

Great to hear that you are programming!

Nice post about onclick attribute attaching events

If you need some functionality more than once,wrap this in a function.(random integer).It makes code cleaner and you dont need to repeat yourself.

Check this out.I bet this example is far from perfect but still give some insights

// You can use some library like "Lodash" to use such functions.
// returns random integer in span <min:max>
function randomInteger(min = 1, max = 100){
  // in case that there are wrong values
  if(min >= max){throw new Error(`Hey i cant get random integer in range min:${min} to max:${max}`)}
  
  return Math.round((Math.random() * (max-min))+min)

}

// buttons

var number1GeneratorButton = document.getElementById('number1-generator'),
    number2GeneratorButton = document.getElementById('number2-generator'),
    calculateSumButton = document.getElementById('sum-button'),
    resetPageButton = document.getElementById('reset-page');
    
// outputs

var number1Output = document.getElementById('number1'),
    number2Output = document.getElementById('number2'),
    sumOutput = document.getElementById('sum');

// add event listeners to the buttons


number1GeneratorButton.addEventListener('click', function(){

  number1Output.innerHTML = randomInteger();

})

number2GeneratorButton.addEventListener('click', function(){

  number2Output.innerHTML = randomInteger();

})


calculateSumButton.addEventListener('click', function(){

  var sum = parseInt(number1Output.innerHTML) + parseInt(number2Output.innerHTML);
  
  sumOutput.innerHTML = sum;

})

resetPageButton.addEventListener('click', reloadWindow)

function reloadWindow() {
    window.location.reload(true);
}


// function addTextNode2(simple3) {
//   text3 = text2 + text1
//   var newtext1 = document.createTextNode(text3),
//       p3 = document.getElementById("p3");

//   p3.appendChild(newtext1);
// }




// function addTextNode4() {
//     if (text1 > text2){
//     text3 = text1 - text2;
//     var newtext4 = document.createTextNode(text3),
//       p3 = document.getElementById("p3");}
//     else if(text2 > text1){
//     text3 = text2 - text1;");}
//     var newtext4 = document.createTextNode(text3),
//       p3 = document.getElementById("p3
//      p3.appendChild(newtext4);
// }

// function test(sampleplace1){ 
//   if(text1 > text2){ 
//       q = text1 - text2; 
//       var storm = document.createTextNode(q).value,
//       p1 = document.getElementById("p1");} 
//       else if(text2 > text1){ 
//         z = text2 - text1; 
//       var storm = document.createTextNode(z).value,
//       p1 = document.getElementById("p1");
//      } 
//     p1.appendChild(storm);
// }

<html lang="en">
<head>
<title>createTextNode example</title>
</head>

<body>
  <button id="number1-generator">Number1Generator</button>
  <button id="number2-generator">Number2Generator</button>
  <button id="sum-button">CalculateSum</button>
<button id="reset-page">Reset page</button>
  <hr />
  <p>Number1: <span class="numbers" id="number1"></span></p>
  <p>Number2: <span class="numbers" id="number2"></span></p>
  <p>Sum: <span id="sum"></span></p>
</body>
</html>

How to replace an appendChild instead of it adding to the previous appendChild?

2 Answers2