CODEWITHSUNDEEP
javascripthtmlbutton
user7128116
user7128116

Reputation:

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?

Upvotes: 7

Views: 35245

Answers (6)

Jes&#250;s Oviedo
Jes&#250;s Oviedo

Reputation: 1

im testing *thisfunction randomcolour(){ document.getElementsByTagName('button').style.backgroundColor=${ var num = Math.floor(Math.random() * Math.pow(2, 24)); return '#' + ('00000' + num.toString(16)).substr(-6);}`;

}`*

Upvotes: 0

Laxmi Kanta Dahal
Laxmi Kanta Dahal

Reputation: 151

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

Upvotes: 0

codneto
codneto

Reputation: 2469

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>

Upvotes: 0

Nartub
Nartub

Reputation: 3908

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

Upvotes: 1

dokgu
dokgu

Reputation: 6070

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.

Upvotes: 1

Hum4n01d
Hum4n01d

Reputation: 1370

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

Upvotes: 6

Related Questions