点击单选按钮切换图片功能失效，请求排查代码错误

你的JavaScript代码存在以下关键错误，导致图片切换功能失效：

• 事件参数与冗余代码问题：HTML中onClick="changeFormula(e)"里的e未定义，浏览器会抛出Cannot read properties of undefined (reading 'stopPropagation')错误，直接阻断后续代码执行；且此处不需要调用stopPropagation()，单选按钮的点击事件无需阻止冒泡。

• 数组索引判断错误：document.getElementsByName('destino')返回的类数组对象索引从0开始，但你判断时用了radio[1]、radio[2]、radio[3]，其中radio[3]不存在，三个单选按钮的正确索引应为0、1、2。

• 图片元素获取错误：document.getElementsByName('img')返回的是NodeList集合，即使只有一个图片，也不能直接用img.src，必须通过索引取具体元素（如img[0].src）；更推荐用document.getElementById('img')，因为图片已设置id属性，获取更高效准确。

• 路径与拼写错误：原HTML中图片路径是./image/cuidad.jpg，但JS里仅写cuidad.jpg，缺少./image/前缀会导致浏览器找不到图片；第二个图片路径写成mantaña.jpg，正确拼写应为montaña.jpg，需与单选按钮的value值对应。

修正后的代码 #

HTML部分（仅调整事件调用） #

<p id="destino-info">Destino:</p>
<label class="destino-label">
  <input type="radio" name="destino" value="destino" onClick="changeFormula()" checked>
  Cuidad</label> 
<label class="destino-label">
  <input type="radio" name="destino" value="montaña" onClick="changeFormula()"> Montaña </label> 
<label class="destino-label">
  <input type="radio" name="destino" value="playa" onClick="changeFormula()">Playa</label>

<img src="./image/cuidad.jpg" name="img" id="img" alt="" width="350px" height="350px">

JavaScript部分 #

<script type='text/javascript'>
    function changeFormula(){
        var radio = document.getElementsByName('destino');
        var img = document.getElementById('img');
        if (radio[0].checked){
            img.src = "./image/cuidad.jpg";
        } else if (radio[1].checked){
            img.src = "./image/montaña.jpg";
        } else if (radio[2].checked){
            img.src = "./image/playa.jpg";
        }
    }
</script>

内容的提问来源于stack exchange，提问作者fernando vasquez