11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] Récupérer la valeur du title & href pour innerhtml

Bonjour,
J'ai un problème avec la réutilisation d'une valeur, je m'explique :

J'essaie d'écrire un "historique" en récupérant la valeur des attributs title et href des balise <a>

Javascript:

function h(z) {
var x=document.getElementById('q').value;
var t=z.title;
var c=z.href;
var d=document.getElementById('b')

d.innerHTML+='<a href=&#34;'+c+''+q+'&#34; target=&#34;main&#34;>'+q+'</a> '+t+''
}


Html:

 <input  type="text"  id="q" />

<a href="http://www.google.com/search?q="  title="Google" 
onclick="h(this);return false">Google</a>

<div id="b"></div>


La récupération s'effectue bien. Le texte que je souhaitais s'affiche correctement.

Voici le problème :

Dans <div id="b"></div>, le lien entre les balises <a> est réécrit avec comme adresse "file://localhost/.../répertoire/http://www.google.com/search?q="

Ce que je souhaite, c'est que l'adresse de la balise <a> soit "http://www.google.com/search?q="

Pourquoi "file://localhost/..." vient se rajouter dans l'adresse? Cà n'a rien avoir avec le fait que mon document est sur mon disque et pas en ligne?

J'espère avoir été assez claire.
Etant débutante, j'essaie de m'expliquer comme je peux. Smiley confused
Modifié par Foson (12 Dec 2007 - 07:12)
Excuse moi de te dire cela mais l'une des bases lorsque l'on construit des algorithmes est d'utiliser des noms de variables qui veulent dire quelque chose car la ca complique beaucoup la lecture de ton code. Ou alors tu as peur d'abimer ton clavier? Smiley biggol Smiley biggol Smiley biggol (désolé elle était facile).

Et puis je ne comprend ce que tu veux faire...
Salut,

Alors comme l'a judicieusement fait remarqué skywalk3r, utilise des noms explicites pour les variables, ça sera bien plus clair pour tout le monde, à commencer par toi !

Ensuite, si je peux me permettre, il est préférable de passer en paramètre d'une fonction les "références" vers les objets que tu souhaites manipuler (ici, l'input de recherche, et le div à enrichir), comme par exemple leur Id. De cette façon, tu pourras facilement changer les Id sans avoir à changer ta fonction javascript !

Pour résumé, ton code javascript pourrait ressembler à :
function buildHistorique(lien,idRecherche,idHistorique){
	var recherche = document.getElementById(idRecherche).value;
	var titre = lien.title;
	var url = lien.href;
	var divHistorique = document.getElementById(idHistorique);

	divHistorique.innerHTML += "<a href=\""+url+recherche+"\" target=\"main\">"+recherche+"</a>"+titre+"<br>";
}


et ton html :
<input  type="text"  id="query" />
<a id="link" href="http://www.google.com/search?q=" title="Google"
onclick="buildHistorique(this,'query','historique');return false;">Google</a>
<div id="historique"></div>


Pour concaténer des string, inutile d'insérer des +''+, tu peux les concaténer directement.

Voilà

++
En clair, on gagnerait en robustesse en remplaçant
divHistorique.innerHTML += "<a href=\""+url+recherche+"\" target=\"main\">"+recherche+"</a>"+titre+"<br>";

par
var lien = document.createElement("a");
lien.href = url + encodeURIComponent(recherche);
lien.target = "main";
lien.appendChild(document.createTextNode(recherche));

divHistorique.appendChild(lien);
divHistorique.appendChild(document.createTextNode(titre));
divHistorique.appendChild(document.createElement("br"));

C'est beaucoup plus verbeux, mais on peut atténuer ça en utilisant des fonctions qui vont bien.
Bon, merci mon problème est résolu! grâce à vous.

Plus précisemment:
skywalk3r a écrit :
l'une des bases lorsque l'on construit des algorithmes est d'utiliser des noms de variables qui veulent dire quelque chose car la ca complique beaucoup la lecture de ton code. Ou alors tu as peur d'abimer ton clavier?

Ok. Je conviens que sur un forum, il est beaucoup plus facile d'aider qq'un si le code est clair. Je le saurai pour la prochaine fois. Smiley biggrin
Dans ce cas-ci, je continuerai à utiliser le minimum de lettre pour les noms car je dois appeller les fonction pour chaque lien et ... il y en a beucoup beaucoup. Donc pour ne pas gonfler la taille de mon fichier inutilement, je me restreint Smiley langue . Mais peut-être qu'il y a moyen en une phrase javascript d'appeler le onclick pour chaque lien exemple : "à chaque fois que je clique sur les liens entre des <div class="1"> la fonction s'opperera?" Ce serait génial!

babeuh a écrit :

il est préférable de passer en paramètre d'une fonction les "références" vers les objets que tu souhaites manipuler (ici, l'input de recherche, et le div à enrichir), comme par exemple leur Id. De cette façon, tu pourras facilement changer les Id sans avoir à changer ta fonction javascript !

Ok, merci du conseil. J'ai appris quelque chose. Smiley biggrin

Julien Royer a écrit :

En clair, on gagnerait en robustesse en remplaçant ...
C'est beaucoup plus verbeux, mais on peut atténuer ça en utilisant des fonctions qui vont bien.

Là aussi j'apprends! Mais dans ce cas-ci je ne l'utiliserai pas maintenant car j'y comprends encore rien. Et plutôt que de coller un code incompréensible, je préfère utiliser ce que je connais actuellement. Smiley smile

En fait c'est en essayant la proposition de babeuh que la réponse est tombée. Je suis restée avec le même code de départ sauf que j'ai remplacé

d.innerHTML+='<a href=&#34;'+c+''+q+'&#34; target=&#34;main&#34;>'+q+'</a>

par

d.innerHTML+='<a href=\"'+c+''+q+'\" target=\"main\">'+q+'</a>

Aller savoir pourquoi ça marche! Smiley eek

Un grand merci à vous tous! Smiley biggrin
Modifié par Foson (12 Dec 2007 - 13:24)
Foson a écrit :
Là aussi j'apprends! Mais dans ce cas-ci je ne l'utiliserai pas maintenant car j'y comprends encore rien. Et plutôt que de coller un code incompréensible, je préfère utiliser ce que je connais actuellement. Smiley smile

Le souci est que celui que tu utilises actuellement posera problème dans de nombreux cas. Par exemple si la recherche contient le caractère "...
Je sais pas si sur ce forum, on marque les sujets comment résolu quand ils le sont? Car je trouve pas le lien...

En tout cas, celui-ci est [RESOLU]
Modifié par Foson (12 Dec 2007 - 13:29)
Julien Royer a écrit :

Le souci est que celui que tu utilises actuellement posera problème dans de nombreux cas. Par exemple si la recherche contient le caractère "...

Chapeau bas au Modérateur! Smiley cligne Bien vu!

J'avais pas tilter sur la première remarque. Smiley confused

Effectivement ça pose problème dans ce cas précis. Le hic c'est que je ne maîtrise pas les appendChild,createTextNode,... et je n'arrive pas à construire mon bloc de cette manière. Je m'en vais potasser tous ça!

Si vous, monsieur le Modérateur, avez un lien vers une page ou un tutoriel qui vous semble clair sur ce sujet précis, merci de m'en faire profiter! Sinon google m'aidera comme à l'habitude...

Encore Merci! Smiley biggrin

[EDIT]
Julien Royer a écrit :

Il suffit de jeter un coup d'oeil aux règles du forum

Ok! Ca aussi c'est à potasser Smiley sweatdrop
En attendant, c'est fait.
Modifié par Foson (12 Dec 2007 - 13:49)
Sujet clos
Aller à