1

I need help coding in HTML. I have tried many different ways of coding this button. The button is on the webpage now but will not change the background color of the web page. 

     <html>
     <body>

     <button type="button" onclick="myFunction()"> Blue</button>

    <script>

    function myFunction(){
    document.getElementByld("background").sytlecolor="blue";

    </script>
    </body>
    </html>
  • Welcome to Stack Overflow! – Akshay Bande Dec 03 '19 at 16:14
  • 2
    Does this answer your question? [javascript change background color on click](https://stackoverflow.com/questions/31089414/javascript-change-background-color-on-click) – Muhammad Dec 03 '19 at 16:17
  • This question already have answers here on Stackoverflow, first you should google or search here on Stackoverflow and then post a question here. – Muhammad Dec 03 '19 at 16:20
  • Does this answer your question? [Changing button color programmatically](https://stackoverflow.com/questions/1819878/changing-button-color-programmatically) – AlexG Dec 03 '19 at 16:29

11 Answers11

1

I would recommend you to go through Javascript DOM and HTML 

function myFunction(){
  document.getElementsByTagName("body")[0].style.background="blue";   
}
<html>
<body>
  <button type="button" onclick="myFunction()"> Blue</button>
</body>
</html>
Akshay Bande
  • 2,491
  • 2
  • 12
  • 29
0

Try this in your function

function myFunction(){
    document.body.style.background = "blue";
}
Floppy52
  • 184
  • 9
0

Try this:

var isBlue = false;

document.querySelector("button").addEventListener("click", function(){
    if(isPurple){
        document.body.style.background= "white";
    } 
    else{
        document.body.style.background= "blue";
    }
    isBlue = !isBlue
})

This will not only change the background colour but will create a button that toggles it.

Aditya Prakash
  • 1,549
  • 2
  • 15
  • 31
0

You have two errors here:

  1. You are selecting an element by id, but that element doesn't exists on your html.
  2. Your javascript have a sintax error. (Missing closing brackets on your function.
  3. You are using the property sytlecolor that doesn't exists (there's a typo on style, and even this way, stylecolor doesn't exists. Use style.backgroundColor instead.

Here's a working example:

<html>
<body id="background">

<button type="button" onclick="myFunction()"> Blue</button>

<script>
    function myFunction(){
        document.getElementByld("background").style.backgroundColor = "blue";
    }
</script>
</body>
</html>

Also if you want to change the body background color, you don't need to put an id on it:

<html>
<body>

<button type="button" onclick="myFunction()"> Blue</button>

<script>
    function myFunction(){
        document.body.style.backgroundColor = "blue";
    }
</script>
</body>
</html>
Elias Soares
  • 9,884
  • 4
  • 29
  • 59
0

Try this

<body>

<button type="button" onclick="myFunction()">Click to change color</button>

<script>
function myFunction(){
    document.body.style.background = "aqua";
}
</script>
</body>
</html>```

background is not a document object. It is an html dom object.
Kaushik Dayalan
  • 46
  • 5
0

Add this line in HTML Body

<a onclick="changecolor('navy')" id="navy">#0E2A36</a>

You can add customize color in CSS like

#navy{
    background:#0E2A36;
}

Then add JavaScript

<script type="text/javascript">
    function changecolor(id) {
       document.body.style.background = document.getElementById(id).innerHTML;
    }
</script>
mhhabib
  • 2,975
  • 1
  • 15
  • 29
0

There are few spelling mistakes but this should explain

1.make the element a variable. 2. set that variable with .style.background = "blue"

spelling mistakes:

  • sytle = style
  • getElementByld = getElementById
<html>
  <body>
    <div id="background">
      <button type="button" onclick="myFunction()">Blue</button>
    </div>
    <script>
      function myFunction() {
        //get the element
        const background = document.getElementById("background");
        // set it to blue
        background.style.background = "blue";
      }
    </script>
  </body>
</html>

hope this helps.

Stefan T
  • 111
  • 8
0

Add id of the specific element whose background you want to change

document.getElementsByTagName('body')[0].style.background='green'


<html>
<body>
  <button type="button" 
  onclick="document.getElementsByTagName('body')[0].style.background='green'">
  Click for green backgournd
  </button>
  <br />
  <br /><br />
  
  Another way to do from text box Just for your reference
  <br />
  <input style="width:100%" type="text" id="txtColorBox" placeholder="enter color name and click button"/>
  <br/>
  <button type="button" 
  onclick="document.getElementsByTagName('body')[0].style.background=document.getElementById('txtColorBox').value">
  Click for green backgournd
  </button>
</body>
</html>
Hardik Masalawala
  • 991
  • 7
  • 20
0

I'll go with

//On top goes the head
<button type="button">Blue</button>

And then I would create a JS file

var button=document.querySelector('button'),
    body  =document.querySelector('body');

button.addEventListener('click',function(){
  body.style.backgroundColor="blue";
});

That should turn the background blue.

rogerurrutia
  • 33
  • 7
0

There are two methods to this with vanilla javascript and the second is jQuery.

In your case, you are not using jQuery. So the solution is vanilla javascript.

function myFunction(element) {
  element.style.backgroundColor="green";
}

<button type="button" onclick="myFunction()"> Blue</button> //Change web bg

if you need to change the button background. Pass the current pointer.

<button type="button" onclick="myFunction(this)"> Blue</button> //Change buttion bg

bg => background

Hassan Raza
  • 671
  • 10
  • 27
0

Hi you could do something like so:

document.getElementById('buttonColor').addEventListener('click', () => 
    document.body.style.backgroundColor = "blue"
);
<html>
<body>
    <button id="buttonColor">Change Color</button>
</body>
</html>
rcoro
  • 326
  • 6
  • 12