a.js创建HTML按钮calls.js function成功，但是在html页面抹掉all.css

Question

I'm new to javascript and self teaching - running into an issue I can't seem to find answers to or related examples.

Issue: HTML button calls =.js function successfully, but wipes out all.css on page

Context:

• I have an html that uses.css (works)
• html loads a.js (works)
• .js makes a button on html (works)
• button calls.js function (works, but wipes out all the.css' formatting)

Any thoughts? Thank you.

var button = document.createElement("button");
button.innerHTML = "Press Me";

var body = document.getElementsByTagName("body")[0];

body.appendChild(button);

button.addEventListener("click", function() {
    Main();
});

Here's the entire.js:

  const myHeading = document.querySelector('h1');
  myHeading.fontFamily = "courier";
  myHeading.textContent = "Welcome!";

Main:
  Main();
  
Functions:
  function Main() {
    DisplayStuff();
    DisplayUI();
  }
  function DisplayStuff() {
    WriteMe ("Hello!");
    }
  

  function DisplayUI(){
    //Buttons
    var button = document.createElement("button");
    button.innerHTML = "Press Me";

    var body = document.getElementsByTagName("body")[0];
    body.appendChild(button);

    button.addEventListener ("click", function() {
       Main();
    });
  }

  function WriteMe(x) { var R = "<br>"; document.write(x + R);} ```

Answer 1

The document.write() was in fact the culprit clearing out all the.css on the page. Instead I created something on the page to send text to. In this case, a table's.innerHTML and the.css remained intact.

myTable.rows[r].cells.item(c).innerHTML = h1.textContent