I can't make an onChange event to change a photo when we select the select field
When I select a select option would Q appear a different image in img that 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;
}
}
4 answers
You must reference the element in the variable foto: since the value is a string it will be taken by value, and 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;
}
}
You should also consider that .selectedIndex is not a function but a property of <select>. Depending on the cases you can use .value, but this is your choice.
Tries like this
<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" />
Gustavo has already given a good answer (already accepted) about how to reference the element and the selectIndex. I leave one more answer to add another way of thinking the code.
So instead of using switch / case you can use like 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 that 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
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;
}
}