Setting background color of div on click

Question

I have a set of dynamically generated div elements like:

<div on-click="selected">one</div>
<div on-click="selected">two</div>
<div on-click="selected">three</div>
<div on-click="selected">four</div>
<div on-click="selected">five</div>
<div on-click="selected">six</div>
<div on-click="selected">seven</div>

I want to change the background color of div on which it is clicked and lose it when another div is clicked.

I could achieve this using tabindex, but I want to retain it until I click it on the another div or clear it intentionally, which tabindex does not provide.

How can I acieve it using javascript?

Answer 1

<div class="radiodiv" onclick=selected(this)>one</div>
<div class="radiodiv" onclick=selected(this)>two</div>
<div class="radiodiv" onclick=selected(this)>three</div>
<div class="radiodiv" onclick=selected(this)>four</div>
<div class="radiodiv" onclick=selected(this)>five</div>
<div class="radiodiv" onclick=selected(this)>six</div>
<div class="radiodiv" onclick=selected(this)>seven</div>

<script>
var divItems = document.getElementsByClassName("radiodiv");

function selected(item) {
    this.clear();
    item.style.backgroundColor = 'red';
}

function clear() {
    for(var i=0; i < divItems.length; i++) {
        var item = divItems[i];
        item.style.backgroundColor = 'white';
    }
}
</script>

Answer 2

FYI, without any loops.

var xxx = null;

function sel(element){
if(xxx != null){
xxx.className = "default";
}
element.className = "selected";
xxx = element;
}

Answer 3

Try this:

<div onclick="selected(this)">one</div>
<div onclick="selected(this)">two</div>
<div onclick="selected(this)">three</div>
<div onclick="selected(this)">four</div>
<div onclick="selected(this)">five</div>
<div onclick="selected(this)">six</div>
<div onclick="selected(this)">seven</div>

<script>
function selected(element)
{
    var divs=document.getElementsByTagName("div");
    divs.forEach(function(i)
    {
        i.style.backgroundColor="auto";
    });
    element.style.backgroundColor="red";
}
</script>

Answer 4

Put all Your 'divs' into one div which will be container. Then, by js, loop trough them and set css for non-selected and different for selected.

code :

function sel(id) {
    var divs=document.getElementById('container').getElementsByTagName('div');  //get all divs from div called container
    for(var i=0;i<divs.length; i++) {
        if(divs[i]!=id) {  //if not selected div set .items css
            divs[i].className='items';
        }
    }
    id.className='selitem';  //set different css for selected one
}

/* css for non-selected div*/
.items
{
    display:block;
    width:200px;
    background-color:white;
    color:black;
    cursor:pointer;
    margin-bottom:5px;
}
.items:hover
{
    background-color:blue;
    color:white;
}
/* css for selected div*/
.selitem
{
    display:block;
    width:200px;
    background-color:red;
    color:yellow;
    cursor:pointer;
    margin-bottom:5px;
   
}

<div id="container">
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
</div>

There is explanation in the code.

Answer 5

The best way to do that, is called a function in JavaScript, onclick or another. In this function you can create your own code, try to change the CSS properties and you will change the background color.

One example that I created:

function onoverbut(elemento)
{
elemento.style.color= "silver";
elemento.style.fontSize= "25px";
}

name function: onoverbut

attribute: elemento, which is the class or id html, that you need to pass.