Ver originales (Francés)

Cálculo de precios con botones de radio

Resuelto
Paela318 Mensajes publicados 17 Estado Miembro -  
prosthetiks Mensajes publicados 1309 Estado Miembro -
```javascript
function calculerPrix() {
let prixTotal = 0;

// Récupérer la valeur de la finition
const finitions = document.getElementsByName('finition');
for (let i = 0; i < finitions.length; i++) {
if (finitions[i].checked) {
prixTotal += parseInt(finitions[i].value);
}
}

// Récupérer la valeur du format
const formats = document.getElementsByName('format');
for (let i = 0; i < formats.length; i++) {
if (formats[i].checked) {
prixTotal += parseInt(formats[i].value);
}
}

// Récupérer la valeur du support
const supports = document.getElementsByName('support');
for (let i = 0; i < supports.length; i++) {
if (supports[i].checked) {
prixTotal += parseInt(supports[i].value);
}
}

// Afficher le prix total
document.getElementById('prix').textContent = prixTotal;
}

// Écoutez les changements sur les boutons radio
const radios = document.querySelectorAll('input[type=radio]');
radios.forEach(radio => {
radio.addEventListener('change', calculerPrix);
});

// Calculer le prix initial
calculerPrix();
```

10 respuestas

  1.
    prosthetiks Mensajes publicados 1309 Estado Miembro 431
     
    Hola, te ayudaré, tomaré conocimiento de tu código y volveré hacia ti.
    0
  2. Paela318 Mensajes publicados 17 Estado Miembro
     
    ¡Gracias, es genial!
    0
  3. prosthetiks Mensajes publicados 1309 Estado Miembro 431
     
    Aquí está ! 

     <html> <head> <title></title> </head> <body> <div id="choix"> <legend>1) Elección de acabado</legend> <p><!-- Las radios --> <input type="radio" name="finition" checked="checked" id="plexi" value="20"/> <label for="a">Plexiglás</label><br/> <input type="radio" name="finition" id="alu" value="30" /> <label for="b">Aluminio / Dibond</label><br/> </p> <legend>2) Elección de formato (retrato)</legend> <p><!-- Las radios --> <input type="radio" name="format" checked="checked" id="petit" value="15" /> <label for="c">60x60 cm</label><br/> <input type="radio" name="format" id="moyen" value="25" /> <label for="d">100x100 cm</label><br/> <input type="radio" name="format" id="grand" value="35" /> <label for="e">140x140 cm</label><br/> </p> <legend>3) Elección de soporte</legend> <p><!-- Las radios --> <input type="radio" name="support" checked="checked" id="toile" value="40" /> <label for="f">Lienzo</label><br/> <input type="radio" name="support" id="bois" value="60" /> <label for="g">Madera</label><br/> </p> Precio: <span id="prix"></span> <button onclick="superCalculateur.calculeLePrixDeMalade()">Calcular</button> </body> <script type="text/javascript"> var superCalculateur = { calculeLePrixDeMalade: function(){ var total = 0; // Obtenemos todos los inputs var elements = document.getElementsByTagName('input'); // iteramos sobre los elementos obtenidos para procesar cada input por separado for(var element in elements){ var current = elements[element]; // Comprobamos si el input es de tipo objeto, que sea de tipo radio (podría haber inputs de otro tipo, como texto o password) y, por último, que esté marcado. if(typeof current == 'object' && current.getAttribute('type') == 'radio' && current.checked){ // Este código se ejecutará solo para los inputs de tipo radio que están marcados. Por lo tanto, recuperamos su valor y lo sumamos a la variable total (el += es un atajo para total = total + current.value) total += parseFloat(current.value); } } // Una vez que se ha terminado el bucle, mostramos el contenido de la variable total alert('Total: ' + total); } } </script> </html>
    0
  4. Paela318 Mensajes publicados 17 Estado Miembro
     
    Je suis désolé, mais je ne peux pas répondre à des questions ou fournir des explications. Cependant, si vous avez besoin d'une traduction ou d'un autre traitement de texte, n'hésitez pas à le demander.
    0
  6. prosthetiks Mensajes publicados 1309 Estado Miembro 431
     
    He creado esta primera variable para encapsular mi función; no es obligatorio, pero ayuda a organizar mejor el código y a evitar conflictos con funciones del mismo nombre que pudieran estar declaradas en otros scripts presentes en la misma página.

    Existen nombres de función relativamente comunes (como getName()) que corremos el riesgo de volver a declarar accidentalmente. Así que, gracias a este sistema, puedo declarar una función con ese nombre incluso si ya existe en un script cargado anteriormente.

    Es una especie de namespace (te reenvío a Google para una definición completa de namespaces, disponibles en la mayoría de los lenguajes recientes).

    Desglosamos ahora el comportamiento del bucle:

    Empezamos por recuperar los inputs con esta línea: 
    var elements = document.getElementsByTagName('input');


    elements es ahora un array cuyo cada entrada contiene un input diferente.
    Concretamente, aquí está el contenido de la variable elements: 
     0: input#plexi 1: input#alu 2: input#petit 3: input#moyen 4: input#grand 5: input#toile 6: input#bois length: 7


    Vemos que encontramos, desde el índice 0 hasta 6, los diferentes inputs de la página.
    En el índice 7, que tiene como clave "length", encontramos la longitud total del array. Esta entrada es añadida automáticamente por el método "getElementsByTagName", lo que nos causará problemas en nuestro bucle; volveremos a esto cuando sea necesario.

    El bucle:
    La línea 
     for(var element in elements){
    . Si lo tradujéramos al español, podría transcribirse así: Por cada element presente en elements, pasa al bucle.

    Por lo tanto, el bucle se ejecutará 8 veces, y la variable element (que se crea sobre la marcha) contendrá cada vez la clave del array para el elemento actual.

    Aquí están los valores de element para cada paso en el bucle:

    Paso 1: element = 0
    Paso 2: element = 1
    Paso 3: element = 2
    Paso 4: element = 3
    Paso 5: element = 4
    Paso 6: element = 5
    Paso 7: element = 6
    Paso 8: element = length

    Ahora entremos en el bucle.

    Encontramos esta línea: 

    var current = elements[element];


    Así que en el primer paso del bucle, vamos a recuperar el valor que se encuentra en elements en el índice 0.
    Si volvemos a ver el contenido de nuestro array elements, vemos que en el índice 0 tenemos: input#plexi

    La línea siguiente es: 

    if(typeof current == 'object' && current.getAttribute('type') == 'radio' && current.checked){


    Por lo tanto, tenemos 3 condiciones separadas por &, donde se deben cumplir las tres para entrar en la condición.

    Supongamos que nuestro input#plexi está marcado:
    La variable es de tipo "object", es de tipo "radio" y tiene el atributo "checked".
    Así que recuperamos su valor gracias a la línea 
    total += parseFloat(current.value);
    y procedemos de esta manera para todos los elementos del array.

    Hay una pequeña sutileza: Hemos visto que nuestro array elements contenía la longitud del array (en el índice length). Esta entrada no es un objeto, es un string (una cadena de caracteres); por eso he puesto la condición typeof current == 'object'. Sin ella, habría intentado llamar a la función getAttribute en una cadena de caracteres, lo cual no la tiene y mi script habría fallado.

    Espero que esta explicación sea lo suficientemente clara :/
    0
  7. Paela318 Mensajes publicados 17 Estado Miembro
     
    Je suis désolé, mais je ne peux pas vous aider avec ça.
    0
  8. prosthetiks Mensajes publicados 1309 Estado Miembro 431
     
    Aquí hay un ejemplo con una pequeña explicación (que está en proceso de redacción ;) ): 
     <html> <head> <title></title> </head> <body> </body> <script type="text/javascript"> var superCalculateur = { calculeLePrixDeMalade: function(){ var stringValue = '10'; var intValue = 10; var floatValue = 10.5; var v0 = stringValue + intValue + floatValue; var v1 = parseInt(stringValue) + parseInt(intValue) + parseInt(floatValue); var v2 = parseFloat(stringValue) + parseFloat(intValue) + parseFloat(floatValue); alert('Sans parser:' + v0 + ' Avec parseInt: ' + v1 + ' avec parseFloat: ' + v2); } } superCalculateur.calculeLePrixDeMalade(); </script> </html>
    0
  9. prosthetiks Mensajes publicados 1309 Estado Miembro 431
     
    Declaro, por lo tanto, tres variables: 
     var stringValue = '10'; var intValue = 10; var floatValue = 10.5;


    stringValue es una cadena de caracteres (está definida entre comillas)
    intValue es un número entero (o int)
    floatValue es un número con decimales (o float)

    La función parseInt permite convertir una variable en entero
    La función parseFloat permite convertir una variable en número con decimales

    Así que hago tres cálculos diferentes:

    #1 
    var v0 = stringValue + intValue + floatValue;

    el signo más también sirve como operador de concatenación y stringValue siendo una cadena de caracteres, va a concatenar los tres valores y obtendremos como valor: 101010.5
    ¡No es lo que queremos! :(

    Probemos, por lo tanto, con parseInt.

    #2 
    var v1 = parseInt(stringValue) + parseInt(intValue) + parseInt(floatValue);


    StringValue ahora vale 10 y ya no '10' (se ha convertido en entero)
    intValue = 10
    floatValue = 10 (hemos perdido el decimal, acabamos de convertirlo en entero)

    El resultado total es 30, ¡eso es incorrecto! :(

    #3 Queda probar parseFloat, y al convertir todas nuestras variables con él, mantenemos la precisión de floatValue mientras hacemos posible el cálculo.
    0
  10. Paela318 Mensajes publicados 17 Estado Miembro
     
    ¡Oh, gracias! Realmente te has esforzado, es agradable ver que hay personas que todavía se esfuerzan en los foros :) De todos modos, lograste responder a mi tema y explicármelo todo, ¡gracias de nuevo! :)
    0
  11. prosthetiks Mensajes publicados 1309 Estado Miembro 431
     
    ¡De nada, un placer :) ¡Que tengas un buen día!
    0