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