Hello, I am trying to figure out how to inherit the h1 style CSS inside a JavaScript function called myFunction. Currently, when the button is clicked, it just displays the default h1 style. Any help would be appreciated. Thank you!
<html>
<style type="text/css">
body {
color: purple;
font: normal 18px Verdana, Arial, sans-serif;
background-color: white }
h1 {
color: Red;
font: normal 20px Verdana, Arial, sans-serif;
background-color: white }
</style>
<body>
<p id="demo"><h1>Click here.</h1></p>
<button onclick="myFunction()">Check it</button>
<script type="text/javascript">
function myFunction()
{
document.writeln("<h1>", "Hello there", "</h1>");
}
</script>
</body>
</html>