why javascript is running over my prior html

Question

new in js and couldnt find an answer for that. I think its pretty basic BUT

my js code in deleting any html I write before. what i would like to be happen - when pressing "load" button the script will run and create buttons without deleting the "load" button itself and h1 tag.

appreciate your help!

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8" />
    <title></title>



</head>
<body>




<h1>check</h1>

<button onclick="printbtns()">load</button> 

<script> 
 
 
 function printbtns()
 {
  gobtns('A',18);
  gobtns('B',19);
  gobtns('C',20);
  gobtns('D',21);
  gobtns('E',22);
  gobtns('G',9);
 }

 function gobtns(letter,numberofstorages)
 {
 //window.alert("sometext");
 document.write(letter); 
 document.write("<br>");
 var i;


 for (i=1; i<=numberofstorages; i++){ 
  var str1=letter.concat(i);
  var btn = document.createElement("BUTTON");
  var t = document.createTextNode(str1);
  btn.setAttribute("style","color:red;font-size:23px");
  btn.appendChild(t);
  btn.setAttribute("id", str1);
    document.body.appendChild(btn);
 }

 document.write("<br><br>");
 }

</script>

</body>
</html>

Use appendChild with new br elements instead, exactly the way you do for the button element. appendChild will append the node to the existing document. document.write will overwrite the document — Paul, Jan 19 '19 at 22:56
For the `letter`, you might want to make it the text content of a new span element and append that. — Paul, Jan 19 '19 at 22:57

score 0 · Accepted Answer · answered Jan 19 '19 at 22:58

document.write will erase the current document if the document is already loaded - better to use a more modern, less confusing method of inserting new content, such as creating elements with createElement / appendChild or using .innerHTML:

function insertBR() {
  document.body.appendChild(document.createElement('br'));
}

and

document.body.appendChild(document.createTextNode(letter));
insertBR();`document.write` will *erase the current document* if the document is already loaded - better to use a more modern, less confusing method of inserting new content, such as creating elements with `createElement` / `appendChild` or using `.innerHTML`:

function printbtns() {
  gobtns('A', 18);
  gobtns('B', 19);
  gobtns('C', 20);
  gobtns('D', 21);
  gobtns('E', 22);
  gobtns('G', 9);
}

function insertBR() {
  document.body.appendChild(document.createElement('br'));
}
function gobtns(letter, numberofstorages) {
  insertBR();
  //window.alert("sometext");
  document.body.appendChild(document.createTextNode(letter));
  insertBR();
  var i;


  for (i = 1; i <= numberofstorages; i++) {
    var str1 = letter.concat(i);
    var btn = document.createElement("BUTTON");
    var t = document.createTextNode(str1);
    btn.setAttribute("style", "color:red;font-size:23px");
    btn.appendChild(t);
    btn.setAttribute("id", str1);
    document.body.appendChild(btn);
  }

  insertBR();
  insertBR();
}

<h1>check</h1>
<button onclick="printbtns()">load</button>

why javascript is running over my prior html

1 Answers1