Bouton radio inactif et bouton "affiner" ne donnant pas de résultat

**ajja17r** · 06/10/2023, 14h24

Bonjour à toutes et tous,
Je rencontre une difficulté sur un fichier que je développe en JS pour un site.
Ce fichier est composé de 3 éléments :
1) index.html
2)calcul.js
3)affiner.js

1 et 2 fonctionnent parfaitement. Mais voila, sur le 3 j'ai un soucis de prise en compte de bouton radio.
L'appel à jquery et java renvoi un code 200. Donc tout va bien, mais lorsque je clique sur un bouton radio, rien ne se passe. J'ai fais un test sur https://jsfiddle.net/ qui me renvoi le même résultat, sans me signaler des erreurs. voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function calculAffiner(cigarettesParJour, quantiteEliquideParFlacon, prixEliquide, nombreFlaconNicotine, prixFlaconNicotine, prixCigaretteElectronique) {
	console.log("Fonction calculAffiner appelée");
  // Calcule la quantité de eliquide consommée
  var quantiteEliquideConsommee = cigarettesParJour * 60 / quantiteEliquideParFlacon;
 
  // Calcule le coût de l'eliquide
  var coutEliquide = quantiteEliquideConsommee * prixEliquide;
 
  // Calcule le coût de la nicotine
  var coutNicotine = nombreFlaconNicotine * prixFlaconNicotine;
 
  // Calcule le coût total
  var coutTotal = coutEliquide + coutNicotine + prixCigaretteElectronique;
 
  // Retourne les résultats du calcul
  return {
    quantiteEliquideConsommee: quantiteEliquideConsommee,
    coutEliquide: coutEliquide,
    coutNicotine: coutNicotine,
    coutTotal: coutTotal,
  };
}
 
$(document).ready(function() {
	console.log("jQuery fonctionne correctement");
  // Lors du clic sur le bouton "Affiner",
  $("#valider").click(function() {
    // Récupère les valeurs des champs de saisie
    var cigarettesParJour = $("#cigarettesParJour").val();
    var quantiteEliquideParFlacon = $("#quantiteEliquide").val();
    var prixEliquide = $("#prixEliquide").val();
    var nombreFlaconNicotine = $("#nombreFlaconNicotine").val();
    var prixFlaconNicotine = $("#prixFlaconNicotine").val();
    var prixCigaretteElectronique = $("#prixCigaretteElectronique").val();
 
    // Exécute la fonction de calcul
    var resultats = calculAffiner(cigarettesParJour, quantiteEliquideParFlacon, prixEliquide, nombreFlaconNicotine, prixFlaconNicotine, prixCigaretteElectronique);
 
    // Affiche les résultats du calcul
    $("#quantiteEliquideConsommee").html(resultats.quantiteEliquideConsommee);
    $("#coutEliquide").html(resultats.coutEliquide);
    $("#coutNicotine").html(resultats.coutNicotine);
    $("#coutTotal").html(resultats.coutTotal);
  });
 
});

Celui qui en fait appel depuis le HTML est le suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/ui-darkness/jquery-ui.css">
    <link rel="stylesheet" media="screen" type="text/css" href="style/css.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/calculateur.js"></script>
   <script src="js/affiner.js"></script>
</head>
 
<!-- HTML FONCTIONNEL POUR l'appel calcul.js -->
 
<!-- AFFINER LE CALCUL -->
 <div class="container">
 <h2>Comparateur Coût Cigarette Électronique</h2>
            <div class="form-group">
                <label for="quantiteEliquide">Quantité de eliquide dans un flacon (en ml) :</label>
                <input type="radio" id="quantiteEliquide10" name="quantiteEliquideParFlacon" value="10"> 10 ml
                <input type="radio" id="quantiteEliquide50" name="quantiteEliquideParFlacon" value="50"> 50 ml
            </div>
            <div class="form-group">
                <label for="prixEliquide">Prix de mon eliquide (en €) :</label>
                <input type="text" id="prixEliquide" placeholder="Saisissez le prix de votre eliquide">
            </div>
            <div class="form-group">
                <label for="nombreFlaconNicotine">Nombre de flacon de nicotine :</label>
                <input type="radio" id="nombreFlaconNicotine0" name="nombreFlaconNicotine" value="0"> 0
                <input type="radio" id="nombreFlaconNicotine1" name="nombreFlaconNicotine" value="1"> 1
                <input type="radio" id="nombreFlaconNicotine2" name="nombreFlaconNicotine" value="2"> 2
                <input type="radio" id="nombreFlaconNicotine3" name="nombreFlaconNicotine" value="3"> 3
            </div>
            <div class="form-group">
                <label for="prixFlaconNicotine">Prix d'un flacon de nicotine (en €) :</label>
				<input type="text" id="prixFlaconNicotine1" name="prixFlaconNicotine" placeholder="Saisissez le prix de votre eliquide nicotine">
            </div>
            <div class="form-group">
                <label for="prixCigaretteElectronique">Prix de votre cigarette électronique (en €) :</label>
                <input type="text" id="prixCigaretteElectronique" name="prixCigaretteElectronique" placeholder="Saisissez le prix de votre kit">
            </div>
<button type="button" class="ui-button ui-corner-all ui-widget" id="valider" onclick="calculAffiner()">Affiner</button>
 
</div>

.

Je tiens à préciser que F12 ne me renvoi également aucune erreur.
Je ne trouve pas le soucis...
Merci pour votre contribution

**Toufik83** · 06/10/2023, 19h28

Bonjour,

En rajoutant un console.log juste après la ligne 37 du code JS pour visualiser les valeurs de resultats, je reçois :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
{
    "quantiteEliquideConsommee": null,
    "coutEliquide": null,
    "coutNicotine": null,
    "coutTotal": "NaN65"
}

Les valeurs sont null et NaN, et donc il y'a des problèmes dans ton code JS, car les éléments HTML suivants #cigarettesParJour,#quantiteEliquide,#nombreFlaconNicotine,#prixFlaconNicotine n'existent pas dans le code HTML.

De plus le onclick="calculAffiner()" est en double puisque tu as déjà attaché l'événement clic au bouton avec jQuery.

**ajja17r** · 07/10/2023, 11h26

Merci pour ton retour !

Les valeurs sont null et NaN, et donc il y'a des problèmes dans ton code JS, car les éléments HTML suivants #cigarettesParJour,#quantiteEliquide,#nombreFlaconNicotine,#prixFlaconNicotine n'existent pas dans le code HTML.

Si si, ca y est ! L15, L20 et L25, quant à cigarettesParJour, c'est dans la première partie de mon code (que je n'ai pas copié ici, car fonctionnel)
Concernant les valeurs NULL et NaN sont normales, puisque je n'arrive pas a sélectionner les boutons radios.
C'est ce dernier point qui pose problème (pour le moment

)

Par ailleurs, lorsque je retire la ligne 11 de mon head <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>,
les boutons radios fonctionnent, dès que je mets cette même ligne, les boutons ne fonctionnent plus...

Pour le onclick="calculAffiner() dans le HTML, c'est pour lancer la function calculAffiner () de ma ligne 7 du JS

Merci d'avance pour ton aide

**Toufik83** · 07/10/2023, 16h18

Bonjour,

Envoyé par ajja17r

Par ailleurs, lorsque je retire la ligne 11 de mon head <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>,
les boutons radios fonctionnent, dès que je mets cette même ligne, les boutons ne fonctionnent plus...

Que veux tu dire par ne fonctionnent pas? tu n'arrives pas à récupérer leurs valeurs ou bien elle ne s'affichent pas ou bien ... ?, sinon pour récupérer par exemple la valeur de "la Quantité de eliquide dans un flacon" tu dois cibler les éléments radio avec l'attribut name

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

let qteEliquide=$("[name='quantiteEliquideParFlacon']").val();

La même chose pour les radio "Nombre de flacon de nicotine"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

let nbrFlacNec=$("[name='nombreFlaconNicotine']").val();

Envoyé par ajja17r

Pour le onclick="calculAffiner() dans le HTML, c'est pour lancer la function calculAffiner () de ma ligne 7 du JS

L'événement clic sur le bouton <button type="button" class="ui-button ui-corner-all ui-widget" id="valider" onclick="calculAffiner()">Affiner</button> est déjà attaché par jQuery dans cette partie de code $("#valider").click(function() {....});, donc il faudrait retirer l'attribut onclick du HTML, car on n'utilise pas les deux en même temps.

Quant à la fonction calculAffiner(), je pense aussi qu'elle n'a pas besoin des paramètres puisque les valeurs sont récupérées depuis les élément HTML, tu peux récupérer les valeurs à l'intérieur de la fonction...

**ajja17r** · 09/10/2023, 07h20

Merci pour ton retour et ton aide précieuse !

Que veux tu dire par ne fonctionnent pas? tu n'arrives pas à récupérer leurs valeurs ou bien elle ne s'affichent pas ou bien ... ?

Nom : Capture d'écran 2023-10-09 090132.png
Affichages : 64
Taille : 8,5 Ko

Le bouton sélectionné par defaut c'est "0", avec ma souris, si je veux cliquer sur "1", cela ne le sélectionne pas... Il reste sur "0", il en va de même avec quantiteEliquide.

Lorsque je retire la ligne, cette fois le bouton réagit, mais ne récupère pas la valeur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Dans mon code, j'ai mis du var, tu me conseilles donc de mettre du let c'est ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$("#valider").click(function() {
    // Récupère les valeurs des champs de saisie
    var cigarettesParJour = $("#cigarettesParJour").val();
    var quantiteEliquideParFlacon = $("#quantiteEliquide").val();
    var prixEliquide = $("#prixEliquide").val();
    var nombreFlaconNicotine = $("#nombreFlaconNicotine").val();
    var prixFlaconNicotine = $("#prixFlaconNicotine").val();
    var prixCigaretteElectronique = $("#prixCigaretteElectronique").val();

Remplacé par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$("#valider").click(function() {
    // Récupère les valeurs des champs de saisie
    let cigarettesParJour = $("#cigarettesParJour").val();
    let quantiteEliquideParFlacon = $("#quantiteEliquideParFlacon").val();
    let prixEliquide = $("#prixEliquide").val();
    let nombreFlaconNicotine = $("#nombreFlaconNicotine").val();
    let prixFlaconNicotine = $("#prixFlaconNicotine").val();
    let prixCigaretteElectronique = $("#prixCigaretteElectronique").val();

**NoSmoking** · 11/10/2023, 12h00

Bonjour,
attention :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log("nombreFlaconNicotine", $("[name='nombreFlaconNicotine']").val());

... renvoi la valeur du 1st élément de la collection

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log("nombreFlaconNicotine", $("[name='nombreFlaconNicotine']:checked").val())

... renvoi la valeur de l'élément checked de la collection

idem pour les autres groupes radio.

Bouton radio inactif et bouton "affiner" ne donnant pas de résultat

jQuery

Discussions similaires

Partager

Partager