Javascript 在“选择选项”中更改图像

我想构建以下结构：在select/options旁边加载一个图像，当更改选项时，也更改图像。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">

---

还有，这是解决我问题的最佳选择吗？我已经在搜索其他问题和答案，但它们总是使用按钮，因此我认为它们不适用。

代码中有两个问题：

你没有foto的参考资料。 因为onChange是一个HTML属性，所以在JavaScript中使用它时应该使用change而不是onChange。 const selecionado=document.querySelector'estilo'； var foto=document.querySelector'.imagem__muda'； selecionado.addEventListener'change'，=>{ 如果selecionado.value==Boxe{ foto.src='/imgs/boxe.png'； } }; 艺术： 跆拳道 拳击 空手道

---

代码中有两个问题：

你没有foto的参考资料。 因为onChange是一个HTML属性，所以在JavaScript中使用它时应该使用change而不是onChange。 const selecionado=document.querySelector'estilo'； var foto=document.querySelector'.imagem__muda'； selecionado.addEventListener'change'，=>{ 如果selecionado.value==Boxe{ foto.src='/imgs/boxe.png'； } }; 艺术： 跆拳道 拳击 空手道

---

没有名为onChange的事件，它只是change。您的代码是否正在运行，即您的示例中是否调用了事件回调函数？如果没有，请尝试使用“change”事件而不是“onChange”，foto应该来自何处？复制和粘贴时我忘记了foto引用。没有名为onChange的事件，它只是change。您的代码是否正在运行，即在您的示例中是否调用了事件回调函数？如果没有，请尝试使用“change”事件而不是“onChange”，foto应该来自哪里？复制和粘贴时我忘记了foto引用。

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

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

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

  
})