1

Quero que quando eu selecione, por exemplo, a opção Ches substitui onde está NOME automaticamente no HTML.

.goleiro-1 {
    height: 70px;
    width: 70px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 1px 0 rgba(0,0,0,.5);
    margin-left: 42%;
    margin-top: 25px;
    float: left;
    position: relative;
}

.s_goleiro-1 {
    float: left;
    margin-left: 38%;
    margin-top: 5px;
    position: relative;
    border: none;
    border-radius: 4px;
    padding: 6px;
    font-size: 16px;
}
<img class="goleiro-1" src="http://meusite.com/avatar.php?user=NOME" data-toggle="tooltip" data-placement="top" title="Goleiro"> 
<select class="s_goleiro-1" name="goleiro">
  <option value="PetCech">PetCech</option>
  <option value="Ches">Ches</option>
  <option value="Drionn">Drionn</option>
  <option value="TPB">TPB</option>
</select>
</div>

1 Resposta 1

2

    var select = document.querySelector('.s_goleiro-1');
    var nome   = document.querySelector('.goleiro-1');
    
    select.addEventListener('change',function(){
        nome.src =  'http://meusite.com/avatar.php?user='+select.value;
        nome.title = select.value;
    })
    .goleiro-1 {
        height: 70px;
        width: 70px;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 4px 1px 0 rgba(0,0,0,.5);
        margin-left: 42%;
        margin-top: 25px;
        float: left;
        position: relative;
    }

    .s_goleiro-1 {
        float: left;
        margin-left: 38%;
        margin-top: 5px;
        position: relative;
        border: none;
        border-radius: 4px;
        padding: 6px;
        font-size: 16px;
    }
    <img class="goleiro-1" src="http://meusite.com/avatar.php?user=NOME" data-toggle="tooltip" data-placement="top" title="Goleiro"> 
    <select class="s_goleiro-1" name="goleiro">
      <option value="PetCech">PetCech</option>
      <option value="Ches">Ches</option>
      <option value="Drionn">Drionn</option>
      <option value="TPB">TPB</option>
    </select>

9
  • Me parece que a intenção não era alterar o title da imagem, apenas o src.
    – Sam
    Commented 20/12/2018 às 18:45
  • @Sam Isso é apenas para o rapaz que fez a pergunta poder ver funcionando ;)
    – LeAndrade
    Commented 20/12/2018 às 19:01
  • Funcionou perfeitamente, mas tenho outros 3 campos no formulário: zagueiro-1, meia-1, atacante-1. Como faço para todos? Commented 20/12/2018 às 19:04
  • @ThiagoVinícius tinha que ter informado isso na pergunta, agora já era rs... a não ser que o Douglas aqui queira reformular a resposta, mas a pergunta já foi respondida.
    – Sam
    Commented 20/12/2018 às 19:07
  • Ah, que pena então :/ Commented 20/12/2018 às 19:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .