Besoin d'aide pour comprendre un comportement

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
KobenDallas
Messages : 3
Enregistré le : 27 mai 2020, 10:07

Besoin d'aide pour comprendre un comportement

Message par KobenDallas » 27 mai 2020, 10:17

Code : Tout sélectionner

<input class="formd" size="7" type="text" value="1" autocomplete="off" onkeyup="calcul(1)" id="q_1" />
<input class="formd" size="12" type="text" value="" autocomplete="off" onkeyup="calcul(1)" id="px_1" />
<input class="tot" size="12" type="text" value="" autocomplete="off" id="tot_1" readonly />

<input class="formd" size="7" type="text" value="1" autocomplete="off" onkeyup="calcul(2)" id="q_2" />
<input class="formd" size="12" type="text" value="" autocomplete="off" onkeyup="calcul(2)" id="px_2" />
<input class="tot" size="12" type="text" value="" autocomplete="off" id="tot_2" readonly />

<input class="formd" size="7" type="text" value="1" autocomplete="off" onkeyup="calcul(3)" id="q_3" />
<input class="formd" size="12" type="text" value="" autocomplete="off" onkeyup="calcul(3)" id="px_3" />
<input class="tot" size="12" type="text" value="" autocomplete="off" id="tot_3" readonly />

<script>
function calcul(id_ligne){
	var quantite = document.getElementById('q_'+id_ligne+'').value;
	var prix = document.getElementById('px_'+id_ligne+'').value;
	resultat = quantite*prix;
	document.getElementById('tot_'+id_ligne+'').value = resultat.toFixed(2);
	
	var result = 0;
	array = document.getElementsByClassName('tot');
    	for (let j = 1; j <= array.length; j++) {
			var q = Number(document.getElementById('tot_'+j+'').value);
			console.log('tot_'+j+' = '+q);
			result = result+q;
			document.getElementById('total').innerHTML = result.toFixed(2);
			document.getElementById('avant_remise').innerHTML = result.toFixed(2);
			var id = document.querySelector('input[name=acompte]:checked').value;
			choix_acc(id);
		}
}
</script>
Bonjour,

J'ai un problème sur ce script, j'ai mes input qui sont créés par une boucle en php selon un nombre de ligne désirée j'ai donc (q1*px1) (q2*px2) etc...
pour le calcul du total de chaque ligne j'ai programmé cette fonction, qui fonctionne bien le tout est bien calculé, mais alors où cela cloche, me dirai vous ?
Et bien dans la console Chrome il me dit "Uncaught TypeError: Cannot read property 'value' of null
at calcul"
alors qu'il récupère bien la valeur puisque j'ai bien le total de chaque ligne sans erreur...
J'ai fais un console.log() et tout est OK, je n'arrive pas à comprendre d'où provient l'erreur.
Si quelqu'un pouvais m'aider, plusieurs têtes valent mieux qu'une.

Merci beaucoup

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Besoin d'aide pour comprendre un comportement

Message par webmaster » 27 mai 2020, 13:12

Bonjour,

L'accès aux valeurs de formulaire ne se fait pas avec getelementbyid.

Il faut ajouter une balise <form> </form> autour des <input>
Il faut aussi ajouter en plus des id, l'attribut name

L'acces se fait ensuite avec la syntaxe :
document.forms[0].elements[name].value

Par exemple pour la quantité :

Code : Tout sélectionner

<form>
<input class="formd" size="7" type="text" value="1" autocomplete="off" onkeyup="calcul(1)" id="q_1" />
</form>

var quantite = document.forms[0].elements['q_'+id_ligne+''].value;
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

KobenDallas
Messages : 3
Enregistré le : 27 mai 2020, 10:07

Re: Besoin d'aide pour comprendre un comportement

Message par KobenDallas » 27 mai 2020, 14:26

J'ai bien mis mes input dans les balises "form" c'est juste que j'ai mis le bout de code incriminé
pourtant avec le GetElementById ça fonctionne parfaitement et le log me renvoie bien les bonnes valeurs
malgré tout j'ai ajouté les name en plus des id aux inputs et j'ai modifié avec :

var quantite = document.forms[0].elements['q_'+id_ligne+''].value;

est là c'est l'erreur et pourtant la console m'envoie bien les données et mon "document.getElementById('total').innerHTML = result.toFixed(2);" affiche bien le résultat des calculs de chaque ligne...

il continue avec cette erreur : "Uncaught TypeError: Cannot read property 'value' of undefined at calcul (devis.php:420) at HTMLInputElement.onkeyup"
il me dit qu'il peut pas lire la valeur de cette ligne :
var q = Number(document.forms[0].elements['tot_'+j+''].value);

Code : Tout sélectionner

function calcul(id_ligne){
	var quantite = document.forms[0].elements['q_'+id_ligne+''].value;
	var prix = document.forms[0].elements['px_'+id_ligne+''].value;
	resultat = quantite*prix;
	document.forms[0].elements['tot_'+id_ligne+''].value = resultat.toFixed(2);
	
	var result = 0;
	array = document.getElementsByClassName('tot');
    	for (let j = 1; j <= array.length; j++) {
			var q = Number(document.forms[0].elements['tot_'+j+''].value);
			console.log('tot_'+j+' = '+q);
			result = result+q;
			document.getElementById('total').innerHTML = result.toFixed(2);
			document.getElementById('avant_remise').innerHTML = result.toFixed(2);
			var id = document.querySelector('input[name=acompte]:checked').value;
			choix_acc(id);
		}
}

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Besoin d'aide pour comprendre un comportement

Message par webmaster » 27 mai 2020, 15:10

Il faudrait voir à quelle instruction correspond la ligne 420

Je suppose qu'il s'agit de celle la
document.querySelector('input[name=acompte]:checked').value

Si c'est possible de fournir le HTML complet généré par le PHP, ca serait plus facile pour moi
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

KobenDallas
Messages : 3
Enregistré le : 27 mai 2020, 10:07

Re: Besoin d'aide pour comprendre un comportement

Message par KobenDallas » 27 mai 2020, 17:19

Code : Tout sélectionner


<form name="new_devis" id="new_devis" style="font:13px Myriad Pro" action="devis.php" method="POST" autocomplete="nope" autocorrect="off" autocapitalize="none" spellcheck="false">

<div id="corp_devis" name="corp_devis" >

<table style="margin-right: auto; margin-left: auto; font-weight:600;">
<tr>
<td>
<select class="formd" style="margin-top:-1px" id="produit_1">
<option value="1" selected>FORFAIT</option><option value="2">cum150v</option><option value="3">test1</option><option value="4">test2</option><option value="5">test3</option><option value="6">test4</option>
</select>
</td>
<td><textarea style="height:15px; margin-top:-1px" class="formd" rows="1" cols="70" spellcheck="true" id="text_1">test</textarea></td>
<td><input style="text-align:center; height:25px; margin-top:-1px" class="formd" size="7" type="search" value="1" autocomplete="off" id="q_1" onkeyup="calcul(1)" /></td>
<td><select class="formd" style="margin-top:-1px" id="unite_1">
<option value="u" selected>u</option>
<option value="m&sup2;">m&sup2;</option>
<option value="m&sup3;">m&sup3;</option>
<option value="ml">ml</option> 
</select></td>
<td><input style="text-align:center; height:25px; margin-top:-1px" class="formd" size="12" type="search" value="10.00" id="px_1" autocomplete="off" onkeyup="calcul(1)" /></td>
<td><input style="text-align:center; height:25px; margin-top:-1px" class="tot" size="12" type="search" value="10.00" id="tot_1" autocomplete="off" readonly /></td>
</tr>
</table>

</div>

<br /><center><input class="form" type="submit" value="Enregistrer" style="padding:4px 3px 3px 3px"  /></center>

</form>



<!-- LES FONCTIONS JAVASCRIPT -->
<script>
function calcul(id_ligne){
	var quantite = document.forms[0].elements['q_'+id_ligne+''].value;
	var prix = document.forms[0].elements['px_'+id_ligne+''].value;
	resultat = quantite*prix;
	document.forms[0].elements['tot_'+id_ligne+''].value = resultat.toFixed(2);
	
	var result = 0;
	array = document.getElementsByClassName('tot');
    	for (let j = 1; j <= array.length; j++) {
			var q = Number(document.forms[0].elements['tot_'+j+''].value);
			console.log('tot_'+j+' = '+q);
			result = result+q;
			document.getElementById('total').innerHTML = result.toFixed(2);
			document.getElementById('avant_remise').innerHTML = result.toFixed(2);
			var id = document.querySelector('input[name=acompte]:checked').value;
		}
}
</script>
Voici le formulaire et le script et la ligne qui donne l'erreur selon Chrome est :
var q = Number(document.forms[0].elements['tot_'+j+''].value);
mais malgré tout ça donne bien les résultats ...
merci

Répondre