Currently grappling with an issue in my JavaScript self-teaching journey that I can't seem to resolve or find examples for.
The problem at hand: When the HTML button calls a .js function, it successfully executes the function but also wipes out all CSS formatting on the page.
Here's the context:
- I have an HTML file that incorporates CSS (working fine)
- The HTML file loads a JavaScript file (also working fine)
- The JavaScript file creates a button in the HTML (functioning as expected)
- When the button calls a JavaScript function, it works but messes up all the CSS styling
Any ideas on how to tackle this? 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 is the complete JavaScript code:
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);
}