i have a question about changing the color of only Current element. So i want to change the background color of the current element by every click.

My problem is, i can not reset the background color of previous element.

For an example i have here two background color(yellow, lightblue), if i click on "old div" and "new div", than the background color of two divs changes to green. But only one div should be set to green.

So by every click must change only the background color of current element.

JavaScript

var divTag = document.getElementsByTagName("div");

for (var i = 0; i < divTag.length; i++) {
    if (divTag[i].tagName == "DIV" || divTag[i].tagName == "div") {
         if (divTag[i].addEventListener) {
            divTag[i].addEventListener('click', callback,false);
         } 
         else if (divTag[i].attachEvent) {
            divTag[i].attachEvent('on' + 'click',callback);
         }
    }
}

function callback(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    target.style.backgroundColor = "green";
    e.stopPropagation();
}

HTML

<div id="old">
    <input style="margin: 10px;" type="textbox" />
    <div id="new"></div>
</div>

CSS

#old {
    width:200px;
    height:200px;
    background-color:yellow;
}
#new{
    width:20px;
    height:20px;
    background-color:lightblue;
}

Can you help me? Thanks in advance

i have a question about changing the color of only Current element. So i want to change the background color of the current element by every click.

My problem is, i can not reset the background color of previous element.

For an example i have here two background color(yellow, lightblue), if i click on "old div" and "new div", than the background color of two divs changes to green. But only one div should be set to green.

So by every click must change only the background color of current element.

JavaScript

var divTag = document.getElementsByTagName("div");

for (var i = 0; i < divTag.length; i++) {
    if (divTag[i].tagName == "DIV" || divTag[i].tagName == "div") {
         if (divTag[i].addEventListener) {
            divTag[i].addEventListener('click', callback,false);
         } 
         else if (divTag[i].attachEvent) {
            divTag[i].attachEvent('on' + 'click',callback);
         }
    }
}

function callback(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    target.style.backgroundColor = "green";
    e.stopPropagation();
}

HTML

<div id="old">
    <input style="margin: 10px;" type="textbox" />
    <div id="new"></div>
</div>

CSS

#old {
    width:200px;
    height:200px;
    background-color:yellow;
}
#new{
    width:20px;
    height:20px;
    background-color:lightblue;
}

Can you help me? Thanks in advance

• javascript
• html
• css

2 Answers 2

If you worried about performance, you can just save previous and reset it's background color to normal.

var prevDiv = null;

function callback(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if(prevDiv) {
        prevDiv.style.backgroundColor = '';        
    }
    target.style.backgroundColor = 'green';
    prevDiv = target;
    e.stopPropagation();
}

http://jsfiddle/v6d6veyv/

Reset the background colour of all other divs when you click one.

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
    divs[i].style.backgroundColor = '';
}

http://jsfiddle/4uosvc75/