Karan Nagpal Karan Nagpal - 1 month ago 8
Javascript Question

JavaScript - Button or function not working

<!DOCTYPE html>
<html>
<head>
<title> Javascript 1 </title>
<style type = "text/css">
#firstid
{
color:red;
background-color:blue;
font-size:25px;
font-style:italics;
}
#firstid:hover
{
color:white;
}
.firstclass
{
color:cyan;
background-color:pink;
font-size:35px;
font-face:verdana;
}
</style>
<script type = "text/javascript">
document.write("<h1>Hello<br/></h1> ");
function changeBG()
{
document.body.stlyle.background="green";
var x = document.getElementById("firstid");
x.style.color="brown";
x.style.fontSize="10px";
}

</script>
</head>
<body>
<pre id="firstid">
To do:
1. Class
2. ID
3. Function
</pre><br/>
<p class="firstclass">
Harry Potter is a wizard.
</p>

<button type="button" onClick="changeBG()">Change To do</button>
</body>
</html>


This is the code.

I created a function changeBG() and a button "Change To do" . When I click the button, this function should run but it doesn't run. Please solve this problem.

The function includes changing background and changing color and fontsize of the specified id.

Answer

you mispelled

document.body.stlyle.background="green";

to

document.body.style.background="green";