I cannot do an onchange event to change a photo when we select the select field

Question

When I select a select option I would have a different image appear in the img I created, but it’s 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;
    }
}

Answer 1

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, 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;
    }
}

It should also be considered that .selectedIndex is not a function but a property of the <select>. Depending on the cases can be used .value, but this is your choice.

Answer 2

Try it this way

<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" />

Answer 3

Gustavo already gave 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 so:

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 to have the photo name in value.

Example:

<option value="acucar-uniao">Áçúcar Refinado união</option>  
//acucar-uniao em vez de ac-uniao 

Answer 4

    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;
        }
    }