Soucis avec document.getElementById

Résolu/Fermé

Sinistrus Messages postés 1009 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 20 février 2023 - 7 nov. 2018 à 10:54
Sinistrus Messages postés 1009 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 20 février 2023 - 8 nov. 2018 à 10:04

Bonjour à tous !

Je rencontre un petit soucis en essayant de récupérer une valeur calculée dans mon Javascript.
Le résultat s'affiche bien dans un <span> mais pas dans un type texte.

Lorsque je clique sur Fr_Quantite :

<input type="text" name="Fr_PrixUnit[<?php echo $i;?>]" id="Fr_PrixUnit_<?php echo $i;?>" value="<?php echo $data["Prix".$_PAYS]; ?>" oninput="calcul('<?php echo $i;?>')">

il récupère les valeurs du poids dans la base de données et dans une boucle il cumul le poids.

Ensuite, mon JavaScript, me sert a récupérer instentanément le cumul total de mon poids que j'affiche dans un :

<span id='Poidt'><?php echo $P_TOTAL; ?></span>

Mais lorsque je veux l'afficher dans mon

<input type="text" id="Fr_Poidt" name="Fr_Poidt" value="<?php echo $P_TOTAL; ?>">

il ne se passe rien...

$(function(){
/* calcul */

	LePoids = 0; $inputs = document.querySelectorAll("[id^='Fr_Poid_Total_']"); pd=$inputs.length;
	for(i=0; i<pd;i++) {LePoids += + document.querySelectorAll("[id^='Fr_Poid_Total_']")[i].value;}
	document.getElementById("Poidt").innerHTML = LePoids.toLocaleString('fr');
	document.getElementById("Fr_Poidt").value = LePoids.toLocaleString('fr');
});

En résumé, .innerHTML fonctionne mais .value pas du tout. Vous avez une idée svp ?

Merci de votre aide.

A voir également:

Soucis avec document.getElementById
Document.getelementbyid ✓ - Forum Webmastering
Document.write // document.getElementById() ✓ - Forum Javascript
Document.getelementbyid("").style.display ✓ - Forum Javascript
Document.getelementbyid onclick - Astuces et Solutions
Typeerror: document.getelementbyid(...) is null ✓ - Forum Javascript

1 réponse

Réponse 1 / 1

Reivax962 Messages postés 3671 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 009
7 nov. 2018 à 11:11

Bonjour,

Es-tu sûr que id="Fr_Poidt" est défini dans ta page, une seule fois ?
Affiche le code source de ta page générée (depuis le navigateur), et recherches Fr_Poidt pour t'en assurer.

Xavier

Sinistrus Messages postés 1009 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 20 février 2023 17
7 nov. 2018 à 11:15

Oui oui je n'ai aucun id doublé... il est unique

Reivax962 Messages postés 3671 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 009
7 nov. 2018 à 11:29

Tu pourrais nous donner le code source complet de ta page Html générée ?

Sinistrus Messages postés 1009 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 20 février 2023 17
7 nov. 2018 à 11:41

Oui bien-sûr, j'ai supprimé ce qui n'est pas important :

<!doctype html>
<html lang="fr"><!doctype html>
<html lang="fr"><head>

<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


</head>
<body>


<form action="edit_cart_conf.php" method="POST" name="Form" autocomplete="OFF" enctype="multipart/form-data">
<input type="hidden" name="NumId" value="2056" />
<input type="hidden" name="action" value="send" />

<table class="table table-striped table-hover table-bordered">
<thead class="thead-dark"><tr><th colspan="4" scope="col">Entete</th></tr></thead>
<tbody>

<tr><td>

<div class="txt_gras txt_majuscule" style="padding:0 0 7px 0">Produit 1</div>
<div style="float:left;">
  <div class="small">Vaporisateur de 100ml</div>
<div class="div_05"></div>
<div class="small"><div style="width:80px;float:left">Poids Net</div><div style="float:left">: 455.42g</div></div><br>
<div class="small"><div style="width:80px;float:left">Colisage</div><div style="float:left">: 48</div></div><br>
<div class="small"><div style="width:80px;float:left">EAN13</div><div style="float:left">: 3442151009629</div></div>
</div>

<div style="float:left;width:100%;margin-top:10px">
<div class="form-row">


<div class="input-group col-sm-1 col-md-1" style="width:80px;margin-right:5px">
	<label class="small" for="Fr_Email">Quantité</label><div class="div_00"></div>
	<input type="number" class="form-control form-control-sm txt_droit" name="Fr_Quantite[0]" onkeypress='return isNumberKey(event,this)' id="Fr_Quantite_0" max="99" min="1" value="1" oninput="calcul('0')">
</div>

<div class="input-group col-sm-1 col-md-1" style="width:100px;margin-right:5px">
	<label class="small" for="Fr_Email">Prix Unitaire</label><div class="div_00"></div>
	<input type="text" class="form-control form-control-sm txt_droit" name="Fr_PrixUnit[0]" id="Fr_PrixUnit_0" readonly value="6500" oninput="calcul('0')">
</div>

<input type="hidden" name="Fr_Promo[0]" id="Fr_Promo_0" value="15">

<div class="input-group col-sm-1 col-md-2" style="width:150px">
	<label class="small" for="Fr_Email">Prix Total (-15%)</label><div class="div_00"></div>
	<input type="text" class="form-control form-control-sm txt_droit" name="Fr_PrixTotal[0]" id="Fr_PrixTotal_0" readonly value="5525">

<button type="button" style="margin-left:15px" title="Supprimer du panier" data-toggle="tooltip" data-placement="bottom" class="btn btn-danger" onClick="location.href='/my/_shop-dell.php?page=20';"><i class="fa fa-trash"></i></button>

</div>

</div>
</div>


<input type="hidden" name="Fr_Poids[0]" id="Fr_Poids_0" value="0.45542">
<input type="hidden" name="Fr_Poid_Total[0]" id="Fr_Poid_Total_0" value="0.45542">

<div style="background:#FF0000">

</div>

</td></tr>

<tr><td>

<div class="txt_gras txt_majuscule" style="padding:0 0 7px 0">Produit 2</div>
<div style="float:left;">
  <div class="small">Flacon pompe de 350ml</div>
<div class="div_05"></div>
<div class="small"><div style="width:80px;float:left">Poids Net</div><div style="float:left">: 384.6g</div></div><br>
<div class="small"><div style="width:80px;float:left">Colisage</div><div style="float:left">: 24</div></div><br>
<div class="small"><div style="width:80px;float:left">EAN13</div><div style="float:left">: 6181100380378</div></div>
</div>

<div style="float:left;width:100%;margin-top:10px">
<div class="form-row">


<div class="input-group col-sm-1 col-md-1" style="width:80px;margin-right:5px">
	<label class="small" for="Fr_Email">Quantité</label><div class="div_00"></div>
	<input type="number" class="form-control form-control-sm txt_droit" name="Fr_Quantite[1]" onkeypress='return isNumberKey(event,this)' id="Fr_Quantite_1" max="99" min="1" value="1" oninput="calcul('1')">
</div>

<div class="input-group col-sm-1 col-md-1" style="width:100px;margin-right:5px">
	<label class="small" for="Fr_Email">Prix Unitaire</label><div class="div_00"></div>
	<input type="text" class="form-control form-control-sm txt_droit" name="Fr_PrixUnit[1]" id="Fr_PrixUnit_1" readonly value="425" oninput="calcul('1')">
</div>

<input type="hidden" name="Fr_Promo[1]" id="Fr_Promo_1" value="20">

<div class="input-group col-sm-1 col-md-2" style="width:150px">
	<label class="small" for="Fr_Email">Prix Total (-20%)</label><div class="div_00"></div>
	<input type="text" class="form-control form-control-sm txt_droit" name="Fr_PrixTotal[1]" id="Fr_PrixTotal_1" readonly value="340">

<button type="button" style="margin-left:15px" title="Supprimer du panier" data-toggle="tooltip" data-placement="bottom" class="btn btn-danger" onClick="location.href='/my/_shop-dell.php?page=18';"><i class="fa fa-trash"></i></button>

</div>

</div>
</div>

<input type="hidden" name="Fr_Poids[1]" id="Fr_Poids_1" value="0.3846">
<input type="hidden" name="Fr_Poid_Total[1]" id="Fr_Poid_Total_1" value="0.3846">

<div style="background:#FF0000">

</div>

</td></tr>

<tr style="background:#212529" class="txt_blanc txt_majuscule"><td>

<div class="row">

<div class="col-6">
<div class="small">Nombre de produits</div>
<div class="small">Poids total</div>
<div class="small">Frais de livraison</div>
<div class="div_05"></div>
<div class="txt_gras">Net à payer</div>
</div>

<div class="col-6" align="right">
<div class="small"><span id='Quant'>2</span></div>
<div class="small"><span id='Poidt'>0.84002</span> Kg</div>
<div class="small"><span id='Frais'>0</span> F</div>
<div class="div_05"></div>
<div class="txt_gras"><span id='Total'>5865</span> F CFA</div>
	
<input type="text" id="Fr_Poidt" name="Fr_Poidt" value="">

</div>

</td></tr>
</tbody>
</table>


</form>



<!--###########################################################################################################################-->
<script>

function calcul(i) {
	var quant = parseInt(document.getElementById("Fr_Quantite_" + i).value);
	document.getElementById("Fr_Quantite_" + i).value = quant;

	var promo 		= parseInt(document.getElementById("Fr_Promo_" + i).value);
	var quantite 	= parseInt(document.getElementById("Fr_Quantite_" + i).value);
	var prix 		= parseInt(document.getElementById("Fr_PrixUnit_" + i).value);
	var total 		= parseInt(prix * quantite);
	var ttc 		= (total-(total*promo)/100);
	document.getElementById("Fr_PrixTotal_" + i).value = ttc;

	var poid_q = parseInt(document.getElementById("Fr_Quantite_" + i).value);
	var poid_p = parseFloat(document.getElementById("Fr_Poids_" + i).value);
	var LePoids = poid_q * poid_p;
	document.getElementById("Fr_Poid_Total_" + i).value = LePoids;

$(function(){
	total = 0; $inputs = document.querySelectorAll("[id^='Fr_PrixTotal_']"); il=$inputs.length;
	for(i=0; i<il;i++) {total += + document.querySelectorAll("[id^='Fr_PrixTotal_']")[i].value;}
	document.getElementById("Total").innerHTML 		= total.toLocaleString('fr');

	quant = 0; $inputs = document.querySelectorAll("[id^='Fr_Quantite_']"); qt=$inputs.length;
	for(i=0; i<qt;i++) {quant += + document.querySelectorAll("[id^='Fr_Quantite_']")[i].value;}
	document.getElementById("Quant").innerHTML 		= quant.toLocaleString('fr');

	LePoids = 0; $inputs = document.querySelectorAll("[id^='Fr_Poid_Total_']"); pd=$inputs.length;
	for(i=0; i<pd;i++) {LePoids += + document.querySelectorAll("[id^='Fr_Poid_Total_']")[i].value;}
	document.getElementById("Poidt").innerHTML 		= LePoids.toLocaleString('fr');
	document.getElementById("Fr_Poidt").value 		= LePoids.toLocaleString('fr');
});

}
</script>

</body>
</html>

Reivax962 Messages postés 3671 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 009
7 nov. 2018 à 11:58

En fait ta fonction n'est pas du tout appelée.
Si tu n'en gardes que le code exécutant, en supprimant

$(function(){

});

, et en gardant tel quel ce qui est au milieu, ça va fonctionner.

Sinistrus Messages postés 1009 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 20 février 2023 17
7 nov. 2018 à 12:31

J'ai supprimé donc la fonction comme tu me l'as demandé, le code est dans la fonction calcul(i) maintenant.
Le innerHTML fonctionne comme précédemment mais toujours pas le .value

Newsletters