I can not make an onchange event to change a photo when we select the select field

3

When I select a select option it would appear that a different image appears in the img I created, but it is not working.

HTML code

<select id="produtos" onchange="mudaFoto()">
   <option value="">Selecione o Produto</option>
   <option value="ac-uniao">Áçúcar Refinado união</option>
   <option value="ac-guarani">Áçúcar Refinado Guarani</option>
   <option value="AM">AM</option>
</select>

Javascript code

var foto = document.getElementById('imagem-produto').src;

function mudaFoto() {
    switch(document.getElementById('produtos').selectedIndex()) {
    case 1: foto = "_imagens/acucar-uniao.png";
    break;
    }
}
    
asked by anonymous 08.03.2014 / 21:25

4 answers

6

You must reference the element in the variable foto : as the value is a string it will be taken by value, not by reference; the element, in turn, being an object, will be taken by reference.

var foto = document.getElementById('imagem-produto');

function mudaFoto() {
    switch(document.getElementById('produtos').selectedIndex) {
      case 1:
      foto.src = "_imagens/acucar-uniao.png";
      break;
    }
}

Also consider that .selectedIndex is not a function but a property of <select> . Depending on the cases you can use .value , however this is your choice.

    
08.03.2014 / 21:33
2

Try this out

<script type="text/javascript">
    window.onload = function(){

        mudaFoto();
    }

    function mudaFoto(){
        switch(document.getElementById('produtos').value) {
            case '1': 
                document.getElementById('imagem-produto').src = "_imagens/acucar-uniao.png";

            break;
            case '2': 
                document.getElementById('imagem-produto').src = "_imagens/acucsr-uniao.png";

            break;
        }
    }
</script>

 <select id="produtos" onchange="return mudaFoto();">
   <option value="">Selecione o Produto</option>
   <option value="1">Áçúcar Refinado união</option>
   <option value="2">Áçúcar Refinado Guarani</option>
   <option value="3">AM</option>
 </select><br /><br />

 <img id="imagem-produto" src="teste.png" alt="" width="100" height="100" />
    
08.03.2014 / 22:07
2

Gustavo has already given a good answer (already accepted) about how to reference the element and selectIndex. I leave one more answer to add another way of thinking the code.

So instead of using switch / case you can use this:

var select = document.getElementById('produtos');
var foto = document.getElementById('imagem-produto');
select.addEventListener('change', function () {  // correr uma função quando o select muda
    foto.src = this.value; // atribuir o value da opção à .src da foto
});

This option implies your select / options have in value the name of the photo.

Example:

<option value="acucar-uniao">Áçúcar Refinado união</option>  
//acucar-uniao em vez de ac-uniao 
    
08.03.2014 / 22:08
0
    window.onload = function(){

        mudaFoto();
    }

    function mudaFoto(){
        switch(document.getElementById('produtos').value) {
            case '1': 
                document.getElementById('imagem-produto').src = "_imagens/acucar-uniao.png";

            break;
            case '2': 
                document.getElementById('imagem-produto').src = "_imagens/acucsr-uniao.png";

            break;
        }
    }
    
08.03.2014 / 22:11