I need to change the background color for three buttons using Javascript. Below is the code:

<input type="button" id="btn" value="Box 1" onclick="changeColor(this)">
<input type="button" id="btn" value="Box 2" onclick="changeColor(this)">
<input type="button" id="btn" value="Box 3" onclick="changeColor(this)">

<script>
    function changeColor(this) {
        this.document.getElementById("btn").style.backgroundColor = "red";
    }
</script>

It works well for first button(Box 1).

When I click the second and third buttons, the background color of first button changes.

But I need to change the background colors of respective buttons that I have clicked.

Can anyone please help me to know where I was wrong?

I need to change the background color for three buttons using Javascript. Below is the code:

<input type="button" id="btn" value="Box 1" onclick="changeColor(this)">
<input type="button" id="btn" value="Box 2" onclick="changeColor(this)">
<input type="button" id="btn" value="Box 3" onclick="changeColor(this)">

<script>
    function changeColor(this) {
        this.document.getElementById("btn").style.backgroundColor = "red";
    }
</script>

It works well for first button(Box 1).

When I click the second and third buttons, the background color of first button changes.

But I need to change the background colors of respective buttons that I have clicked.

Can anyone please help me to know where I was wrong?

• javascript

• 3 Having more than one element with the same ID is invalid HTML. You should fix that. – CertainPerformance Commented May 7, 2018 at 7:42

7 Answers 7

The issue is that you are using same id for all the buttons. Use class instead.

Also, this is a reserved keyword and since you're using it as parameter name causes an error.

function changeColor(elem) {
   elem.style.backgroundColor = "red";
}

<input type="button" class="btn" value="Box 1" onclick="changeColor(this)">
<input type="button" class="btn" value="Box 2" onclick="changeColor(this)">
<input type="button" class="btn" value="Box 3" onclick="changeColor(this)">

    

Using this as a variable name causes a Javascript error, since this is a reserved keyword. Change this to the button variable (element in the snippet below) and pass it to your function.

Also - never set the same ID for multiple elements! This renders as an invalid HTML document.

Here's a working code snippet:

<input type="button" id="btn" value="Box 1" onclick="changeColor(this)">
<input type="button" id="btn" value="Box 2" onclick="changeColor(this)">
<input type="button" id="btn" value="Box 3" onclick="changeColor(this)">

<script>
    function changeColor(element) {
        element.style.backgroundColor = "red";
    }
</script>

id need to be unique also in the function changeColor , this as an argument may not be relevant, you can provide any other name. In the function the argument elem will represent the context which has triggered the click event. The the id from it and change it's style

function changeColor(elem) {
  this.document.getElementById(elem.id).style.backgroundColor = "red";
}

<input type="button" id="btn1" value="Box 1" onclick="changeColor(this)">
<input type="button" id="btn2" value="Box 2" onclick="changeColor(this)">
<input type="button" id="btn3" value="Box 3" onclick="changeColor(this)">

Your function is always referencing the element with the id of btn, which all three of your inputs have.

Where you are passing (this) into your function, you should instead pass in the button's id.

In your function, you can then reference the id that was passed in:

    function changeColor(id) {
        document.getElementById(id).style.backgroundColor = "red";
    }

Then, just change your onclicks to something more like onclick="changeColor('btn1')".

You may also want to consider adding a class to the element, as opposed to adding inline styling. This gives you more flexibility:

    function changeColor(id) {
        let btn = document.getElementById(id);
        btn.classList.add('red-button');
    }

Then just add some CSS: .classList { background-color: red; }

Replace this into your param with whatever you want. Because this is a keyword which represents a context. Here it is window object.

function changeColor(element) {
   element.style.backgroundColor = "red";
}

You should change the id to class because id has to be unique.

Try it like this:

<input type="button" class="btn" value="Box 1" onclick="changeColor(this)">
<input type="button" class="btn" value="Box 2" onclick="changeColor(this)">
<input type="button" class="btn" value="Box 3" onclick="changeColor(this)">

<script>
    function changeColor(this) {
        element.style.backgroundColor = "red";
    }
</script>

Here is a working snippet with 2 different solutions, the one you wanted to achieve, and a better one, where I suggest you to not use inline Javascript:
(See ments in my code)

function changeColor(elm) { // "this" is reserved keyword, changed to "elm"
  elm.style.backgroundColor = "red"; // No need for getElement here, we already have it, it's "elm"
}


// Better solution: for no use of inline JS, do the following :
var btns = document.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function() {
    this.style.backgroundColor = "red";
  });
}

<!-- I guess this one is waht you wanted to achieve -->
<input type="button" value="Box 1" onclick="changeColor(this)">
<!-- Changed id to class for the 2 next, to make it work without inline JS -->
<input type="button" class="btn" value="Box 2">
<input type="button" class="btn" value="Box 3">

Hope it helps.