Soucis avec document.getElementById

Résolu

Sinistrus Messages postés 1010 Date d'inscription Statut Membre Dernière intervention -
Sinistrus Messages postés 1010 Date d'inscription Statut Membre Dernière intervention - 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.

Afficher la suite

1 réponse

Réponse 1 / 1

Reivax962 Messages postés 3742 Statut Membre 1 011

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 1010 Date d'inscription Statut Membre Dernière intervention 17

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

Reivax962 Messages postés 3742 Statut Membre 1 011

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

Sinistrus Messages postés 1010 Date d'inscription Statut Membre Dernière intervention 17

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 3742 Statut Membre 1 011

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 1010 Date d'inscription Statut Membre Dernière intervention 17

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

Discussions similaires

probleme document.getElementById

c'est quoi document.getElementById

document.write // document.getElementById()

document.getElementById('mess').style.display = 'block' ?

onMouseOver et document.getElementById(id).style.display

Soucis avec document.getElementById

1 réponse

Votre réponse

Discussions similaires

Newsletters