Erreur [object HTMLInputElement]

**mikl86** · 21/11/2012, 13h26

Bonjour à tous,
Je débute seul en js & php , je suis en train de réaliser ma 1ère appli.

J'essaye de récuperer une valeur javascript et de la mettre dans un input lors d'un clic sur image.
Je parviens à récuperer cette valeur et la placer dans le input, mais pas lors du clic car j'obtiens [object HTMLInputElement] comme value en input.

Plusieurs boutons permettent de remplir l'input en question.

Voici le bout de code qui permet de recuperer la valeur et de remplir mon champs input :

Code :

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

1
2
3
4
5
6
 
<script type="text/javascript">
function remplirgeoloc(id,txt) {
document.getElementById(id).value = geoloc_input;
}
</script>

Que signifie [object HTMLInputElement] ?
Quelle pourrait être la cause du probleme ?

Merci d'avance

**vermine** · 21/11/2012, 13h34

Bonjour,

Cela signifie que vous avez récupéré un élément HTML <input>. D'où viennent les paramètres id et txt, ainsi que la variable geoloc_input ?

**mikl86** · 21/11/2012, 13h43

Geoloc_input est une fonction que j'ai créée plus haut dans le code entre <head> et </head>

Code :

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

document.getElementById("geoloc_input").value = " " + latitude +  "+ " + longitude;

J'ai testé cette fonction en placant le input suivant. Celle ci fonctionne puisque les valeurs sont correctement récupérées :

Code :

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

<input type="text" name="adressegeo" id="geoloc_input" maxlength="8" size="8" value="" />

Mais plusieurs événements doivent pouvoir remplir le input, je ne peux donc pas lui donner l'id geoloc_input.
Par exemple, si l'utilisateur clique sur un bouton représentant sa maison, l'adresse qu'il a saisie lors de son inscription remplira le champs.

id est censé représente le champs à remplir (villedepart), mais si je met villedepart à la place de "id" , cela ne fonctionne plus du tout.
Et txt, je pensais que cela représentait la valeur. Ce parametre est peut etre inutile alors.

Ce que je ne comprends pas, c'est pourquoi le navigateur m'informe qu'un input à été récupéré au lieu d'afficher son contenu .

**vermine** · 21/11/2012, 13h51

Il y a confusion, je pense.

Ici :

Code :

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

1
2
3
function remplirgeoloc(id,txt) {
   document.getElementById(id).value = geoloc_input;
}

C'est une fonction que vous appelez en lui précisant deux paramètres (id et txt). L'id vous sert à récupérer un champ dont vous voulez modifier la valeur (.value). Par contre vous lui donner comme valeur geoloc_input ?! Et ce dernier est une... fonction ?

Reprenons les bases :

getElementById('id') va chercher un élément selon un 'id'. Cet id est une chaine de caractères mais elle peut être une variable contenant une chaine de caractères ;
Element.value renvoie la valeur de l'élément pour peu que celui-ci ait une value ;
document.getElementById('id').value = 'valeur'; donne la valeur 'valeur' au champ d'id 'id'.

**mikl86** · 21/11/2012, 14h14

Et bien en faite c'est la que typiquement tout n'est pas clair pour moi.
Merci énormément pour ces explications.

Par exemple, si je fais :

Code :

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

<span id="geoloc_input"></span>

Je récupère bien les valeurs attendues (longitude + latitude)

Mais je ne comprends pas comment inclure le résultat d'une fonction dans une fonction effectivement. Puisque l'objectif est de remplir un champs input donc en utilisant une fonction javascript avec le produit d'une fonction javascript (geoloc)

**vermine** · 21/11/2012, 14h23

Pourriez-vous nous donner tout le code, je suis un peu perdu.

**mikl86** · 21/11/2012, 14h55

Merci une nouvelle fois pour votre aide.
Je met le code allégé, sinon il fait 3 km ;-)

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<html>
<head>
<title>geoloc</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function getGeoloc() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(
			function(position){
				var latitude = position.coords.latitude;
				var longitude = position.coords.longitude;
				var accuracy = Math.round(position.coords.accuracy);
				document.getElementById("geoloc").innerHTML = " " + latitude + "<br />" + "+ " + longitude  + "<br />";
	            document.getElementById("geoloc_input").value = " " + latitude +  "+ " + longitude;
				document.getElementById("map").innerHTML = "<img src='http://maps.google.com/maps/api/staticmap?
 
center="+latitude+","+longitude+"&zoom=14&size=280x300&markers=color:purple|"+latitude+","+longitude+"&sensor=true'>";
				document.getElementById("geo_input").value = latitude;
				},
 
				function(error) {
				var msg="Erreur de géolocalisation";
				if (error.code==error.TIMEOUT) {msg="Délai dépassé";}
				if (error.code==error.POSITION_UNAVAILABLE) {msg="Position inconnue";}
				if (error.code==error.PERMISSION_DENIED) {msg="Vous avez refusé la géolocalisation";}
				document.getElementById('geoloc').innerHTML = msg;
			       			} 
		);
	} else {
		document.getElementById('geoloc').innerHTML = "Le navigateur n'est pas compatible avec la géolocalisation";
	}
}
</script>
 
<script type="text/javascript">
function remplirgeoloc(id) {
document.getElementById(id).value = geoloc_input;
}
</script>
 
<script type="text/javascript">
function remplirInput(id,txt) {
  document.getElementById(id).value = '<?php echo $donnees['adresse'];?>  <?php echo $donnees['codepostal'];?>  <?php echo $donnees['ville'];?>';
}
</script>
 
</head>
<body onload="initialize()">
<?php include("inc/header.php"); ?>
<form action='traitement' method='POST'>
 
<p> <a href="javascript:getGeoloc()" onclick="document.form.adressedepart.value=this.innerHTML;return false;">
<img src="img/position.jpg" class="alignement" onclick="remplirgeoloc('villedepart');"/></a>
 
<a href="#" onclick="document.form.adressedepart.value=this.innerHTML;return false;"><img src="img/bureau.jpg" onclick="remplirInput('villedepart');"/></a></p>
 
<p><b>Adresse de départ :</b> <span class="legende">(format : adresse code postal ville)</span> <br />
 
<input type='text' name='adressedepart' maxlength='32' size='32' id='villedepart'  value='' onchange="addressChange('villedepart','villearrive')" />
 
<p><b>Adresse d'arrivé :</b> <span class="legende">(format : adresse code postal ville)</span> <br />
<input type='text' name='adressearrive' maxlength='32' size='32' id='villearrive' value= '' onclick="this.value='';" onchange="addressChange('villedepart','villearrive')" /></span></p>
 
 
<p><b>Distance :</b>
<input type="text" name="distancetrajet" id="distance_parcourue_input" maxlength="8" size="8" value="" />km
</p> 
<div align="center"><input type="image" src="img/valider.gif" alt="valider"></div>
 
</form>
</div>
<script type="text/javascript">
addressChange('villedepart','villearrive');
</script>
 
 
</body>
</html>

Erreur [object HTMLInputElement]

JavaScript

Discussions similaires

Partager

Partager