on click to radio button change the images

September 28, 2022

I have 3 radiobuttons,

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

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

Onclick to each radiobutton I want to change the image, I am trying to do it like this, but it is not working, where do I have a error ??

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

>Solution :

this should do the trick

    function changeFormula(e){   
    var radio = document.getElementsByName('destino');
    var img= document.getElementById('img')
    if (e==1){
/* as per image used in html the path is ./image/cuidad.jpg but in here you are using just "cuidad.jpg" try to change the path according to folder too*/
        img.src = "cuidad.jpg";
        img.alt = "cuidad.jpg";
    }else if (e==2){
        img.src = "mantaña.jpg";
                img.alt = "mantaña.jpg";

    }else if (e==3){
        img.src = "playa.jpg";
                img.alt = "playa.jpg";

    }
}

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

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