Image change as the form field is chosen

Question

Image change as the form field is chosen

Navigation

#1 by (2 votes)

1

I want when I select, for example, the Ches option replaces where% is NOME automatically in 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>

javascript html css

asked by anonymous 20.12.2018 / 19:13

1 answer

Print only the first and last date Make reactive validation at angular with formgroup

score 2 · Accepted Answer

    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>