Change Image in Select options

I want to build the following structure: load a image next to a select/options and when change option, change the image too. Html:

<label for="Estilo"> Arte Marcial:</label>
<select name="Estilo" id="estilo">
    <option value=""> </option>
    <option value="Taekwondo" id="taekwondo">Taekwondo</option>
    <option value="Boxe" id="boxe">Boxe</option>
    <option value="Karate" id ="karate">Karate</option>
</select>
<img src="/imgs/mestra.png" class="imagem__muda">

I already tried different solutions and none of them worked, but i think i am close to a solution on the following code:

const selecionado = document.querySelector('#estilo')

selecionado.addEventListener('onChange',()=>{

  if (selecionado.value == "Boxe"){
    foto.src= '/imgs/boxe.png'
  }

  
})

Also, is this the best option to resolve my problem? I already search for other questions and answers but they always uses buttons, so i don´t think they are applicable.

Answer

Two issues in your code:

  1. You have no references of foto.
  2. As onChange is an HTML attribute, you should use change instead of onChange when using that in JavaScript.

const selecionado = document.querySelector('#estilo');
var foto =  document.querySelector('.imagem__muda');
selecionado.addEventListener('change', ()=>{
  if (selecionado.value == "Boxe"){    
    foto.src = '/imgs/boxe.png'; 
  }
});
<label for="Estilo"> Arte Marcial:</label>
<select name="Estilo" id="estilo">
    <option value=""> </option>
    <option value="Taekwondo" id="taekwondo">Taekwondo</option>
    <option value="Boxe" id="boxe">Boxe</option>
    <option value="Karate" id ="karate">Karate</option>
</select>
<img src="/imgs/mestra.png" class="imagem__muda">