css stops working after javascript function is run

idk what's happening, but whenever i use a html button with onclick and make it run a javascript function the css stops working and reverts to the default style. please help so that the css is consistent ;-; CSS ``` body { background-color:black; color:white; } ``` HTML ``` <!DOCTYPE html> <html> <head> <title>Battle Simulator</title> </head> <body> <p>Pick a monster to battle!</p> <button onclick="basicSlime()">Basic: Slime</button> <script> function basicSlime() { document.write("A basic Slime appears!<br/><br/>What will you do?"); } </script> </body> </html> ```

html css

5th Oct 2018, 3:25 PM

Maya

1 Answer

+ 6

don't use .write method you can also use document.getElementsByTagName('button')[0].innerHTML="A basic ... " you can see this working here https://code.sololearn.com/WqhZ63zcJ7Ga/?ref=app

5th Oct 2018, 7:25 PM

AliR૯za