el escenario es que quiero establecer el precio total en función de la elección del usuario de los botones de opción, cuando el usuario elige uno de los botones de opción, el precio cambia en consecuencia.
aquí está el HTML:
<div class="input_box"> <h4 style="text-align: center;">إختر الباقة</h4> <input type="radio" name="package" class="radio" id="pk1" value="70"> <label for="pk1">بالساعة</label> <input type="radio" name="package" class="radio" id="pk2" value="200"> <label for="pk2">يوم</label> <input type="radio" name="package" class="radio" id="pk3" value="2500"> <label for="pk3">شهر</label> </div> <div class="input_box"> <input type="number" placeholder="Total Value" name="price" class="name" id="output"> <i class="fa fa-money icon" aria-hidden="true"></i> </div>Traté de usar una solución javaScript como:
<script> document.getElementsByName("package").addEventListener("change", function(){ document.getElementById("output").innerHTML = this.value;// Show the value in output element }); </script>pero parece que nada me funciona, agradezco cualquier ayuda, gracias :)
Para empezar, hay un par de problemas con su código. Si verifica en la consola del navegador, verá errores y números de línea específicos donde ocurrieron; ese siempre es un buen lugar para comenzar.
Primero, getElementsByName devuelve una colección de elementos, por lo que debe recorrerlo y adjuntar detectores de eventos uno por uno. No puede simplemente llamar a addEventListener para aplicarlos todos a la vez como lo hace con jquery, por ejemplo. Eche un vistazo a la documentación de esa función aquí: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName
En segundo lugar, está intentando actualizar el elemento de output configurando su innerHTML , pero ese elemento es una entrada de número. En su lugar, debe actualizar su propiedad de value .
Aquí hay un fragmento que reúne todo eso.
const radios = document.getElementsByName('package') radios.forEach(function(radio) { radio.addEventListener('change', function() { document.getElementById("output").value = this.value; }) }) <div class="input_box"> <h4 style="text-align: center;">إختر الباقة</h4> <input type="radio" name="package" class="radio" id="pk1" value="70"> <label for="pk1">بالساعة</label> <input type="radio" name="package" class="radio" id="pk2" value="200"> <label for="pk2">يوم</label> <input type="radio" name="package" class="radio" id="pk3" value="2500"> <label for="pk3">شهر</label> </div> <div class="input_box"> <input type="number" placeholder="Total Value" name="price" class="name" id="output"> <i class="fa fa-money icon" aria-hidden="true"></i> </div>