Click the button and change the background color

Asked

Viewed 2,792 times

2

Good afternoon, I am 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 turn green. inserir a descrição da imagem aqui

  .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;
}
javascript html css

  • It’s good to post code because it can be done in many ways, both with JS and CSS only.

  • da to do only with css?

  • It does. Put the button code.

  • I already posted the code I have for the butoes

3 answers

2

You can use the attribute tabindex in divs 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>

  • It’s a good solution but not enough for what I intended, thank you

1


See if there’s any doubt

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>

  • helped a lot, thank you

  • @Roberto Glad to help! Any questions let me know

0

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

Add a common class .personagem for 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 make the green background application 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 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>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.