A .js created HTML button calls .js function successfully, but wipes out all .css on the html page

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

The code looks nice. If `.css` file wipes out AFTER a click on inserted button, the problem should be in `Main();` call. But without its realization - it's impossible to help you :( — Andrew Evt, Nov 15 '20 at 15:31
Does your `Main()` has `document.write` ? Please provide the `Main()` code — kiranvj, Nov 15 '20 at 15:31
document.write replaces everything in the document with new content — Redemption Okoro, Nov 15 '20 at 17:43
Thanks, RO. When the .write is used within the .js, the formatting remains, it's only when I call that function from the button when it gets cleared. — CoderJoe, Nov 15 '20 at 17:50
I looked into document.write, @RedemptionOkoro, and I found some more info to explore. Thanks for the feedback. https://stackoverflow.com/questions/10873942/document-write-clears-page — CoderJoe, Nov 15 '20 at 20:23

score 0 · Answer 1 · answered Nov 19 '20 at 02:55

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

A .js created HTML button calls .js function successfully, but wipes out all .css on the html page

1 Answers1