Change box text when selecting option

Question

Change box text when selecting option

Asked 5 years, 5 months ago

Viewed 54 times

2

I have the following code, but I’m having doubts about how I make the text change according to the selection. I wanted that when selected, for example, the user Marcyen as goalkeeper would appear a text under the orange goalkeeper icon with the chosen user and this would change according to the chosen option.

.campoo {
    background-image: url(https://i.imgur.com/T3ooBmR.png);
    width: 626px;
    height: 406px;
    position: relative;
    left: 14px;
    top: 50px;
    border-radius: 8px;
    background-size: cover;
margin-bottom: 50px;
    background-repeat: no-repeat;
}


.campoo img.goleiro-1 {
left: 35px;
    top: 125px;
    position: absolute;
-webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.campoo img.zagueiro-1 {
    left: 205px;
    top: 125px;
    position: absolute;
    -webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.campoo img.meiodecampo-1 {
left: 425px;
    top: 25px;
    position: absolute;
    -webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.campoo img.atacante-1 {
left: 425px;
    top: 195px;
    position: absolute;
    -webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

div.selection {

}

<div class="campoo">
<input style="display:inline-block; opacity: 0;" class="apresenta <?php echo $status;?>" type="text" id="file" name="nome" value="<?php echo $login_cookie; ?>"  required readonly><br />
<img class="goleiro-1 avatars" src="https://cartolastats.com.br/static/img/goleiro.png"   data-toggle="tooltip" data-placement="top" title="Goleiro" alt="Error"> 
<img class="zagueiro-1 avatars" src="https://cartolastats.com.br/static/img/zagueiro.png"   data-toggle="tooltip" data-placement="top" title="Zagueiro" alt="Error"> 
<img class="meiodecampo-1 avatars" src="https://cartolastats.com.br/static/img/meia.png"   data-toggle="tooltip" data-placement="top" title="Meia" alt="Error"> 
<img class="atacante-1 avatars" src="https://cartolastats.com.br/static/img/atacante.png"   data-toggle="tooltip" data-placement="top" title="Atacante" alt="Error"> </div>


<div class="selection"> Goleiro <img style="float: left;width: 25px;height: 25px;" src="https://i.imgur.com/QM7yhDs.png">
<select class="s_goleiro-1 jogadores" name="goleiro">
  <option value="Marcyen">Marcyen</option>
  <option value="Konan">Konan</option>
  <option value="Jaegar">Jaegar</option>
  <option value="Aquiles">Aquiles</option>
</select></div>

<div class="selection"> Zagueiro  <img style="float: left;width: 25px;height: 25px;" src="https://i.imgur.com/VaZ3naC.png">
<select class="s_zagueiro-1 jogadores" name="zagueiro">
  <option value="Ginter">Ginter</option>
  <option value="LeonGoretzka">LeonGoretzka</option>
  <option value="Asphyxia">Asphyxia</option>
  <option value="Namour">Namour</option>
  <option value="Soldado">Soldado</option>
  <option value="GangplankMain">GangplankMain</option>
</select></div>

<div class="selection"> MEIA  <img style="float: left;width: 25px;height: 25px;" src="https://i.imgur.com/TQZAS6Z.png">
<select class="s_meiodecampo-1 jogadores" name="meiodecampo">
  <option value="RagnarLothbrok">RagnarLothbrok</option>
  <option value="Nayhoff">Nayhoff</option>
  <option value="Coutinho">Coutinho</option>
  <option value="lDaniCeballos">lDaniCeballos</option>
  <option value="Huawey-Bito">Huawey-Bito</option>
</select></div>

<div class="selection"> Atacante  <img style="float: left;width: 25px;height: 25px;" src="https://i.imgur.com/uJaEZKD.png">
<select class="s_atacante-1 jogadores" name="atacante">
  <option value="DiogoAlmeida">DiogoAlmeida</option>
  <option value="MarcusRashford">MarcusRashford</option>
  <option value="Aleix">Aleix</option>
  <option value="Manuu">Manuu</option>
  <option value="Cesarop">Cesarop</option>
  <option value="Xmithie">Xmithie</option>
</select></div></div>

Can use jQuery?

– MauroAlmeida

2019/07/06 at 16:40
1

Yeah, you can, buddy.

– Thiago Vinícius

2019/07/06 at 16:45

1 answer

Browser other questions tagged javascript html jquery html5 css3

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

by LeAndrade • **8,475** points · Answer 1 · 2019-07-06T20:16:11+00:00

To get the selected value of a option in a select with Javascript there are many ways, one of them is using selectedIndex select being listened to by an event usually the onchange:

let select_goleiro = document.getElementsByClassName('s_goleiro-1')[0];

select_goleiro.addEventListener('change', () => {
  let valor = select_goleiro.options[select_goleiro.selectedIndex].value;
  let texto_goleiro = document.getElementById('nomeGoleiro');
  texto_goleiro.innerHTML = valor;
  texto_goleiro.style.display = 'inline-block';
})

let select_zagueiro = document.getElementsByClassName('s_zagueiro-1')[0];

select_zagueiro.addEventListener('change', () => {
  let valor = select_zagueiro.options[select_zagueiro.selectedIndex].value;
  let texto_zagueiro = document.getElementById('nomeZagueiro');
  texto_zagueiro.innerHTML = valor;
  texto_zagueiro.style.display = 'inline-block';
})

.campoo {
  background-image: url(https://i.imgur.com/T3ooBmR.png);
  width: 626px;
  height: 406px;
  position: relative;
  left: 14px;
  top: 50px;
  border-radius: 8px;
  background-size: cover;
  margin-bottom: 50px;
  background-repeat: no-repeat;
}

.campoo img.goleiro-1 {
  left: 35px;
  top: 125px;
  position: absolute;
  -webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.campoo img.zagueiro-1 {
  left: 205px;
  top: 125px;
  position: absolute;
  -webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.campoo img.meiodecampo-1 {
  left: 425px;
  top: 25px;
  position: absolute;
  -webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.campoo img.atacante-1 {
  left: 425px;
  top: 195px;
  position: absolute;
  -webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

div.selection {}

#nomeGoleiro {
  display: none;
  color: black;
  background-color: yellow;
  padding: 5px;
  margin-left: 50px;
  margin-top: 200px;
}

#nomeZagueiro {
  display: none;
  color: black;
  background-color: yellow;
  padding: 5px;
  margin-left: 200px;
}

<div class="campoo">
  <input style="display:inline-block; opacity: 0;" class="apresenta <?php echo $status;?>" type="text" id="file" name="nome" value="<?php echo $login_cookie; ?>" required readonly><br />
  <div class="goleiro">
    <img class="goleiro-1 avatars" src="https://cartolastats.com.br/static/img/goleiro.png" data-toggle="tooltip" data-placement="top" title="Goleiro" alt="Error">
    <span id="nomeGoleiro"></span>
  </div>
  <div id="zagueiro">
    <img class="zagueiro-1 avatars" src="https://cartolastats.com.br/static/img/zagueiro.png" data-toggle="tooltip" data-placement="top" title="Zagueiro" alt="Error">
    <span id="nomeZagueiro"></span>
  </div>
  <img class="meiodecampo-1 avatars" src="https://cartolastats.com.br/static/img/meia.png" data-toggle="tooltip" data-placement="top" title="Meia" alt="Error">
  <img class="atacante-1 avatars" src="https://cartolastats.com.br/static/img/atacante.png" data-toggle="tooltip" data-placement="top" title="Atacante" alt="Error">
</div>


<div class="selection"> Goleiro <img style="float: left;width: 25px;height: 25px;" src="https://i.imgur.com/QM7yhDs.png">
  <select class="s_goleiro-1 jogadores" name="goleiro">
    <option value="Marcyen">Marcyen</option>
    <option value="Konan">Konan</option>
    <option value="Jaegar">Jaegar</option>
    <option value="Aquiles">Aquiles</option>
  </select>
</div>

<div class="selection"> Zagueiro <img style="float: left;width: 25px;height: 25px;" src="https://i.imgur.com/VaZ3naC.png">
  <select class="s_zagueiro-1 jogadores" name="zagueiro">
    <option value="Ginter">Ginter</option>
    <option value="LeonGoretzka">LeonGoretzka</option>
    <option value="Asphyxia">Asphyxia</option>
    <option value="Namour">Namour</option>
    <option value="Soldado">Soldado</option>
    <option value="GangplankMain">GangplankMain</option>
  </select>
</div>

<div class="selection"> MEIA <img style="float: left;width: 25px;height: 25px;" src="https://i.imgur.com/TQZAS6Z.png">
  <select class="s_meiodecampo-1 jogadores" name="meiodecampo">
    <option value="RagnarLothbrok">RagnarLothbrok</option>
    <option value="Nayhoff">Nayhoff</option>
    <option value="Coutinho">Coutinho</option>
    <option value="lDaniCeballos">lDaniCeballos</option>
    <option value="Huawey-Bito">Huawey-Bito</option>
  </select>
</div>

<div class="selection"> Atacante <img style="float: left;width: 25px;height: 25px;" src="https://i.imgur.com/uJaEZKD.png">
  <select class="s_atacante-1 jogadores" name="atacante">
    <option value="DiogoAlmeida">DiogoAlmeida</option>
    <option value="MarcusRashford">MarcusRashford</option>
    <option value="Aleix">Aleix</option>
    <option value="Manuu">Manuu</option>
    <option value="Cesarop">Cesarop</option>
    <option value="Xmithie">Xmithie</option>
  </select>
</div>