JavaScript - Button or function not working

Question

<!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.

@Andreas Sorry, I am using notepad and chrome browser so there is no console. — Karan Nagpal, Oct 27 '16 at 06:16
I'm talking about the console in the browser. For chrome hit `F12` - [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Andreas, Oct 27 '16 at 06:17
@KaranNagpal See this -https://developer.chrome.com/devtools — Abhijeet Kasurde, Oct 27 '16 at 06:17
change `document.body.stlyle.background="green";` to `document.body.style.background="green";` you have a typo there — Sean W, Oct 27 '16 at 06:17
@KaranNagpal Use some decent IDE like Atom, Aptana which will save you from such errors (at-least in learning phases) — Abhijeet Kasurde, Oct 27 '16 at 06:19

score 2 · Accepted Answer · answered Oct 27 '16 at 06:23

2

you mispelled

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

to

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

answered Oct 27 '16 at 06:23

Beginner

4,118
3
17
26

score 0 · Answer 2 · answered Oct 27 '16 at 06:26

0

u have wrong with typing style word
document.body.stlyle.background="green";

answered Oct 27 '16 at 06:26

Ammar Mousa

48
10

score 0 · Answer 3 · answered Oct 27 '16 at 06:33

Change to:

<!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> ");

</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>


<script type = "text/javascript">

function changeBG()
{

    document.body.style.background="green";
    var x = document.getElementById("firstid");
    x.style.color="brown";
    x.style.fontSize="10px";
}

</script>

</html>

JavaScript - Button or function not working

3 Answers3