'Change color of button with javascript

I'm having trouble changing the color of a button with a simple function, the color doesn't change at all.

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

     <script language="JavaScript">

        function changeColor(){
             document.getElementsByTagName('button').style.backgroundColor="green";
        }

     </script>

    </head>

    <body >

        <form action="/action_page.php" method="get" name="form1">
            <input type="text" id="campoDeFlores">
            <button type="button" onclick="changeColor()" name="1">1</button>
            <button type="button"  name="2">2</button>
            <button type="button"  name="3">3</button>
        </form>
    </body>
</html>

Why does it not work?

javascripthtmlbutton


Solution 1:[1]

document.getElementsByTagName returns an list of elements not a single element. You need to convert it to an array with Array.from and then iterate over the buttons with Array.map

function changeColor(){
    Array.from(document.querySelectorAll('button')).map(function(button) {
               button.style.backgroundColor="green";
    })
}

Solution 2:[2]

Try this:

HTML

<form action="/action_page.php" method="get" name="form1">
  <input type="text" id="campoDeFlores">
  <button type="button" onclick="changeColor(this)" name="1">1</button>
  <button type="button" name="2">2</button>
  <button type="button" name="3">3</button>
</form>

JS

function changeColor(btn) {
  btn.style.backgroundColor = "green";
}

Check this Fiddle.

Explanation

At first I thought you were trying to change the color of all the buttons because you were using getElementsByTagName but it looks like you just want to change the color of the button that was pressed. In that case you don't need to use an array. Just pass the element that was clicked to the function and then change that specific button's color.

Solution 3:[3]

You are better off using id="myButton" and document.getElementById('myButton') to specifically select a button instead of every button.

Solution 4:[4]

Make following changes:

  • allow your changeColor function to accept a HTMLElement as parameter.
  • Pass reference to button to changeColor(). Change onclick="changeColor()" in button element to onclick="changeColor(this)"

function changeColor (htmlEl) {
  htmlEl.style.backgroundColor="green";
}
<form action="/action_page.php" method="get" name="form1">
    <input type="text" id="campoDeFlores">
    <button type="button" onclick="changeColor(this)" name="1">1</button>
    <button type="button"  name="2">2</button>
    <button type="button"  name="3">3</button>
</form>

Solution 5:[5]

If you have a lot of button and you want to color and uncolor it by clicking it.you can use if statement inside event listener.This feature is used specific in booking something.

HTML

<button class="btnco">1</button>
<button class="btnco">2</button>

CSS

.btnco{

     background-color: green;
    }

JS

document.querySelectorAll('.btnco').forEach(function(e) {
    e.addEventListener('click', function() {
        if (this.style.backgroundColor=="red"){
            this.style.backgroundColor="green"
        }else{
      this.style.backgroundColor = "red";
    }
    })
  });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hum4n01d
Solution 2 dokgu
Solution 3 Nartub
Solution 4 codneto
Solution 5 Laxmi Kanta Dahal

Related Questions