Search code examples
javascriptradio-button

on click to radio button change the images


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">