2

¡Hola!

Estoy haciendo un pequeño script que modifica la visibilidad, o no, de varios div en funcion de el valor de un input radio. El problema viene al darme cuenta que cuando cambio la selección del radio, el value del mismo no cambia y por tanto la funcion no funciona. Código:

var tarifan = document.getElementById("tarifa");
var tarifas = tarifan.value;
var tarifaBonoCabra = document.getElementById("bonoCabra");
var tarifaChinijo = document.getElementById("chinijo");
var tarifaFisco = document.getElementById("fisco");
var tarifaFleje = document.getElementById("fleje");
var tarifaEmboste = document.getElementById("emboste");

function muestraTarifa(){
	if (tarifas == 1505){
		tarifaBonoCabra.style.display = 'block';
		tarifaChinijo.style.display = 'none';
		tarifaFisco.style.display = 'none';
		tarifaFleje.style.display = 'none';
		tarifaEmboste.style.display = 'none';
	} else if (tarifas == 3){
		tarifaBonoCabra.style.display = 'none';
		tarifaChinijo.style.display = 'block';
		tarifaFisco.style.display = 'none';
		tarifaFleje.style.display = 'none';
		tarifaEmboste.style.display = 'none';
	} else if (tarifas == 5){
		tarifaBonoCabra.style.display = 'none';
		tarifaChinijo.style.display = 'none';
		tarifaFisco.style.display = 'block';
		tarifaFleje.style.display = 'none';
		tarifaEmboste.style.display = 'none';
	} else if (tarifas == 15){
		tarifaBonoCabra.style.display = 'none';
		tarifaChinijo.style.display = 'none';
		tarifaFisco.style.display = 'none';
		tarifaFleje.style.display = 'block';
		tarifaEmboste.style.display = 'none';
	} else if (tarifas == 20){
		tarifaBonoCabra.style.display = 'none';
		tarifaChinijo.style.display = 'none';
		tarifaFisco.style.display = 'none';
		tarifaFleje.style.display = 'none';
		tarifaEmboste.style.display = 'block';
	} else {
		tarifaBonoCabra.style.display = 'none';
		tarifaChinijo.style.display = 'none';
		tarifaFisco.style.display = 'none';
		tarifaFleje.style.display = 'none';
		tarifaEmboste.style.display = 'none';
	};
};
<input name="tarifa" id="tarifa" type="radio" value="1505" onClick="javascript:muestraTarifa();"> <b>150 minutos + 5 GB 8,43€/mes</b><br>
<input name="tarifa" id="tarifa" type="radio" value="3" onClick="javascript:muestraTarifa();"> <b>Llamadas ilimitadas + 3GB 12,68€/mes</b><br>
<input name="tarifa" id="tarifa" type="radio" value="5" onClick="javascript:muestraTarifa();"> <b>Llamadas ilimitadas + 5GB 13,53€/mes</b><br>
<input name="tarifa" id="tarifa" type="radio" value="15" onClick="javascript:muestraTarifa();"> <b>Llamadas ilimitadas + 15GB 16,94€/mes</b><br>
<input name="tarifa" id="tarifa" type="radio" value="20" onClick="javascript:muestraTarifa();"> <b>Llamadas ilimitadas + 20GB 18,64€/mes</b><br>
<input name="bono1" type="checkbox"> Añade más megas a tu tarifa de contrato. <b> BONO 1 GB 2,55€/mes</b>


<div id="bonoCabra" style="display:none">
	<img src="http://www.netservice.es/wp-content/uploads/2019/02/BonoCabra.png">
</div>
<div id="chinijo" style="display:none">
	<img src="http://www.netservice.es/wp-content/uploads/2019/02/Chinijo.png">
</div>
<div id="fisco" style="display:none">
	<img src="http://www.netservice.es/wp-content/uploads/2019/02/Fisco.png">
</div>
<div id="fleje" style="display:none">
	<img src="http://www.netservice.es/wp-content/uploads/2019/02/Fleje.png">
</div>
<div id="emboste" style="display:none">
	<img src="http://www.netservice.es/wp-content/uploads/2019/02/Emboste.png">
</div>

Todo esto esta dentro de un . A ver si me pueden echar una mano. Un saludo, EA8DEP

2
  • No creo que teniendo el mismo Id para todos los inputs puedas hacer lo que quieres. Se me ocurre que puedes pasar un parámetro a la funcion.. has probado eso?
    – MrSman
    Commented el 26 feb. 2019 a las 12:18
  • 1
    Cambia las ID's te las tarifas de los inputs y ponlas únicas, por ejemplo "tarifa1", "tarifa2", etc.
    – Juanant
    Commented el 26 feb. 2019 a las 12:20

1 respuesta 1

2

Tal y como te he comentado, teniendo el mismo Id para todos los inputs, al hacer el getElementById no puedes seleccionar aquel que está marcado.

Para hacer lo que quieres se me ocurre pasar un parámetro a la función. Algo así:

<input name="tarifa" id="tarifa1" type="radio" value="1505" onClick="javascript:muestraTarifa(1505);"> <b>150 minutos + 5 GB 8,43€/mes</b><br>
<input name="tarifa" id="tarifa2" type="radio" value="3" onClick="javascript:muestraTarifa(3);"> <b>Llamadas ilimitadas + 3GB 12,68€/mes</b><br>
<input name="tarifa" id="tarifa3" type="radio" value="5" onClick="javascript:muestraTarifa(5);"> <b>Llamadas ilimitadas + 5GB 13,53€/mes</b><br>
<input name="tarifa" id="tarifa4" type="radio" value="15" onClick="javascript:muestraTarifa(15);"> <b>Llamadas ilimitadas + 15GB 16,94€/mes</b><br>
<input name="tarifa" id="tarifa5" type="radio" value="20" onClick="javascript:muestraTarifa(20);"> <b>Llamadas ilimitadas + 20GB 18,64€/mes</b><br>
<input name="bono1" type="checkbox"> Añade más megas a tu tarifa de contrato. <b> BONO 1 GB 2,55€/mes</b>


<div id="bonoCabra" style="display:none">
    <img src="http://www.netservice.es/wp-content/uploads/2019/02/BonoCabra.png">
</div>
<div id="chinijo" style="display:none">
    <img src="http://www.netservice.es/wp-content/uploads/2019/02/Chinijo.png">
</div>
<div id="fisco" style="display:none">
    <img src="http://www.netservice.es/wp-content/uploads/2019/02/Fisco.png">
</div>
<div id="fleje" style="display:none">
    <img src="http://www.netservice.es/wp-content/uploads/2019/02/Fleje.png">
</div>
<div id="emboste" style="display:none">
    <img src="http://www.netservice.es/wp-content/uploads/2019/02/Emboste.png">
</div>

En el Javascrip puedes captar el parámetro que pasan a la función de esta manera:

<script language="javascript">
var tarifaBonoCabra = document.getElementById("bonoCabra");
var tarifaChinijo = document.getElementById("chinijo");
var tarifaFisco = document.getElementById("fisco");
var tarifaFleje = document.getElementById("fleje");
var tarifaEmboste = document.getElementById("emboste");

function muestraTarifa(value){
    if (Number(value)== 1505){
        tarifaBonoCabra.style.display = 'block';
        tarifaChinijo.style.display = 'none';
        tarifaFisco.style.display = 'none';
        tarifaFleje.style.display = 'none';
        tarifaEmboste.style.display = 'none';
    } else if (Number(value)== 3){
        tarifaBonoCabra.style.display = 'none';
        tarifaChinijo.style.display = 'block';
        tarifaFisco.style.display = 'none';
        tarifaFleje.style.display = 'none';
        tarifaEmboste.style.display = 'none';
    } else if (Number(value)== 5){
        tarifaBonoCabra.style.display = 'none';
        tarifaChinijo.style.display = 'none';
        tarifaFisco.style.display = 'block';
        tarifaFleje.style.display = 'none';
        tarifaEmboste.style.display = 'none';
    } else if (Number(value)== 15){
        tarifaBonoCabra.style.display = 'none';
        tarifaChinijo.style.display = 'none';
        tarifaFisco.style.display = 'none';
        tarifaFleje.style.display = 'block';
        tarifaEmboste.style.display = 'none';
    } else if (Number(value)== 20){
        tarifaBonoCabra.style.display = 'none';
        tarifaChinijo.style.display = 'none';
        tarifaFisco.style.display = 'none';
        tarifaFleje.style.display = 'none';
        tarifaEmboste.style.display = 'block';
    } else {
        tarifaBonoCabra.style.display = 'none';
        tarifaChinijo.style.display = 'none';
        tarifaFisco.style.display = 'none';
        tarifaFleje.style.display = 'none';
        tarifaEmboste.style.display = 'none';
    };
};

</script>

Espero te sirva de ayuda.

1
  • 1
    Jjajaja te estaba escribiendo para decir que tal como estaba no funciona y justo la editaste. Muchas gracias MrSman
    – EA8DEP
    Commented el 26 feb. 2019 a las 12:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.