Click the button and change the background color

Navigation
2

Good afternoon, I'm developing 1 game in Meteor, and for example when I click to choose the character wanted the background turns green, and if you choose another character the background would return to normal and the new selected character would to green. 

.archer{background:transparent;background-image:url("https://vignette.wikia.nocookie.net/draconisimmortalistalos/images/9/98/A_Drolops_Archer.png/revision/latest?cb=20120528064825");
        background-size:cover;
        border: none;
        width: 200px;
        height: 300px;
    }

    .warrior{
        background: transparent;
        background-image: url("https://vignette.wikia.nocookie.net/eligium-brasil/images/1/10/Eligium-guerreiro.png/revision/latest?cb=20121102160221&path-prefix=pt-br");
        background-size:cover;
        border: none;
        width: 200px;
        height: 300px;
    }

    .mage{
        background: transparent;
        background-image: url("https://i.pinimg.com/originals/ab/6e/d0/ab6ed09d2e09c229c3bc6027a1c19470.jpg");
        background-size:cover;
        border: none;
        width: 200px;
        height: 300px;
    }

.archer:active{
    background-color: #3e8e41;
}

.warrior:active{
    background-color: #3e8e41;
}

.mage:active{
    background-color: #3e8e41;
}
    
asked by anonymous 16.05.2018 / 18:16

3 answers

1

See if you have any questions 

var verde1 = document.getElementById("selecao-1");
var verde2 = document.getElementById("selecao-2");
var verde3 = document.getElementById("selecao-3");

verde1.addEventListener("click", function(event) {
verde1.style.backgroundColor  = 'green';
  verde2.style.backgroundColor  = 'transparent';
  verde3.style.backgroundColor  = 'transparent';
})


verde2.addEventListener("click", function(event) {
 verde1.style.backgroundColor  = 'transparent';
  verde2.style.backgroundColor  = 'green';
  verde3.style.backgroundColor  = 'transparent';
})

verde3.addEventListener("click", function(event) {
 verde1.style.backgroundColor  = 'transparent';
  verde2.style.backgroundColor  = 'transparent';
  verde3.style.backgroundColor  = 'green';
})
.hide{
display:hide;
}

#selecao-1{
  
  width:100px;
  height:100px;
  border:1px solid #000000;
}
#selecao-2{

  width:100px;
  height:100px;
  border:1px solid #000000;
}
#selecao-3{

  width:100px;
  height:100px;
  border:1px solid #000000;
}
<div id="selecao-1" class=''></div>
<div id="selecao-2" ></div>
<div id="selecao-3" ></div>
    
16.05.2018 / 18:39
2

You can use the tabindex attribute in div s and in CSS use pseudo-class :focus : 

.archer{
    background: transparent;
    background-image: url("https://vignette.wikia.nocookie.net/draconisimmortalistalos/images/9/98/A_Drolops_Archer.png/revision/latest?cb=20120528064825");
    background-size:cover;
    border: none;
    width: 200px;
    height: 300px;
}

.warrior{
    background: transparent;
    background-image: url("https://vignette.wikia.nocookie.net/eligium-brasil/images/1/10/Eligium-guerreiro.png/revision/latest?cb=20121102160221&path-prefix=pt-br");
    background-size:cover;
    border: none;
    width: 200px;
    height: 300px;
}

.mage{
    background: transparent;
    background-image: url("https://i.pinimg.com/originals/ab/6e/d0/ab6ed09d2e09c229c3bc6027a1c19470.jpg");
    background-size:cover;
    border: none;
    width: 200px;
    height: 300px;
}

.archer:focus,
.warrior:focus,
.mage:focus{
    background-color: #3e8e41;
}
<div tabindex="1" class="archer">
</div>
<div tabindex="2" class="warrior">
</div>
<div tabindex="3" class="mage">
</div>
    
16.05.2018 / 18:34
0

You can create a class .ativo with the green background and add to the element clicked, using eventListener for each.

Add a common class .personagem to each div : 

<div class="personagem archer">
</div>
<div class="personagem warrior">
</div>
<div class="personagem mage">
</div>

And the CSS: 

.personagem.ativo{
    background-color: #3e8e41;
}

And the script that will apply the green background by adding the class .ativo : 

var persons = document.querySelectorAll(".personagem");
var person;
for(var x=0; x<persons.length; x++){
   persons[x].addEventListener("click", function(){
      this.classList.add("ativo");
      if(person && person != this) person.classList.remove("ativo");
      person = this;
   });
}

See it working: 

var persons = document.querySelectorAll(".personagem");
var person;
for(var x=0; x<persons.length; x++){
   persons[x].addEventListener("click", function(){
      this.classList.add("ativo");
      if(person && person != this) person.classList.remove("ativo");
      person = this;
   });
}
.archer{
    background: transparent;
    background-image: url("https://vignette.wikia.nocookie.net/draconisimmortalistalos/images/9/98/A_Drolops_Archer.png/revision/latest?cb=20120528064825");
    background-size:cover;
    border: none;
    width: 200px;
    height: 300px;
}

.warrior{
    background: transparent;
    background-image: url("https://vignette.wikia.nocookie.net/eligium-brasil/images/1/10/Eligium-guerreiro.png/revision/latest?cb=20121102160221&path-prefix=pt-br");
    background-size:cover;
    border: none;
    width: 200px;
    height: 300px;
}

.mage{
    background: transparent;
    background-image: url("https://i.pinimg.com/originals/ab/6e/d0/ab6ed09d2e09c229c3bc6027a1c19470.jpg");
    background-size:cover;
    border: none;
    width: 200px;
    height: 300px;
}

.personagem.ativo{
    background-color: #3e8e41;
}
<div class="personagem archer">
</div>
<div class="personagem warrior">
</div>
<div class="personagem mage">
</div>
    
17.05.2018 / 21:04
Break line in link text with & text Insert array from ajax into mysql database