JS lien via innerHTML non cliquable

Cutya Hair -  
 Cutya Hair -
Bonjour,

Je crée un lien dans une div via innerHTML sur un mouseover, mais ce lien (qui à l'air cliquable vu le pointer), n'a pas l'air actif... Quand je clique, rien ne se passe... 

<script type="text/javascript"> 
    conthour = document.getElementById('conthour'+id); 
    unevar = conthour.innerHTML.length; 
    if(unevar == 14)     { 
     conthour.innerHTML = '<a href="accueil.php">Accueil</a>'; 
    } 
</script>


C'est limite si le lien clignote sous la souris :s
A voir également:

6 réponses

Réponse 1 / 6
Cutya Hair
 
P'tit up :)
0
Cutya Hair
 
Personne ? :(
0
Cutya Hair
 
je désespère lol
0
Cutya Hair
 
Personne à la hauteur de mon problème ? :p
0
Cutya Hair
 
?? :(
0
Réponse 2 / 6
le père
 
Bonjour

J'ai essayé chez moi, ça a l'air de marcher. À condition de :
- donner une valeur à la variable id
- avoir un div qui s'appelle effectivement 'conthour'+id
- que la taille du contenu initial du div soit effectivement de 14.
- que le script ne soit appelé qu' après la création du div en question
Ça donne ça :
<html>
<head>
<title>titre</title>
</head>
<body>
texte avant<div id="conthour2">12345678901234</div>texte après
<script type="text/javascript"> 
   var id=2;    
    conthour = document.getElementById('conthour'+id); 
    unevar = conthour.innerHTML.length; 
    if(unevar == 14)     { 
     conthour.innerHTML = '<a href="accueil.php">Accueil</a>'; 
    } 
</script> 
</body>
</html>


Mais tu parles de créer le lien sur un mouseover : comment se présente ton code ? Car le javascript que tu montres n'est pas appelé par un mouseover
0
Réponse 3 / 6
Cutya Hair
 
Aaaaah merciii d'avoir répondu !! :) Je commençais à être désespérée lol ^^

Ben j'ai changé mon code, mais le problème reste le même : en fait le lien apparaît bien avec le javascript, et quand j'amène la souris dessus pour cliquer, le pointeur devient bien une main qui montre un lien, sauf que le lien se met à clignoter, comme un bug d'affichage, et en cliquant dessus rien ne se passe, c'est ça que je ne comprend pas :s 

<!DOCTYPE html>
<html>
<!--

  Created using /
  Source can be edited via /untitled/edit

-->
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  .madiv
  {
    width: 180px;
    height: 20px;
    border: 1px dotted orange;
  }
</style>
</head>

<body>

  <p id="hello" onclick="javacript: affiche();">Hello World</p>
  <div id="parent">
    <div id="conthour14" class="madiv">
    </div>
    <div id="conthour15" class="madiv">
    </div>
    <div id="conthour16" class="madiv">
    </div>
  </div>

<script>
	var hello = document.getElementById('hello');
	var parent = document.getElementById('parent');
	parent.addEventListener('mouseover', function(yo)
		{
		  hello.innerHTML = 'ID : '+yo.target.id;
		  myid = yo.target.id;
		  datest = document.getElementById(myid);
		  datest.innerHTML = '<a href="http://ww.google.com">Google</a>';
		},
		false);
	parent.addEventListener('mouseout', function(ya)
		{
		  mytid = ya.target.id;
		  darest = document.getElementById(mytid);
		  darest.innerHTML = '';
		},
		false);
</script>

</body>
</html>


Voici le code complet concernant ce que je veux faire, testé cette fois-ci avec JSBin, j'espère que vous pourrez m'aider ^^'
0
Réponse 4 / 6
le père
 
J'ai fait une petite modification pour compter les appels à mouseout 
<script>  
  var cnt=0;  
 var hello = document.getElementById('hello');  
 var parent = document.getElementById('parent');  
 parent.addEventListener('mouseover', function(yo)  
  {  
    hello.innerHTML = 'ID : '+yo.target.id+' '+cnt;  
    myid = yo.target.id;  
    datest = document.getElementById(myid);  
    datest.innerHTML = '<a href="http://ww.google.com">Google</a>';  
  },  
  false);  
 parent.addEventListener('mouseout', function(ya)  
  {  
    mytid = ya.target.id;  
    darest = document.getElementById(mytid);  
    darest.innerHTML = '';  
      cnt++;  
  },  
  false);  
</script>

Conclusion : quand ton curseur clignote, c'est que tu passes ton temps à appeler mouseout.
Je ne comprends pas pourquoi, mais je suppose que quand tu exécutes datest.innerHTML = '<a href="http://ww.google.com">Google</a>'; pendant le mouseon, un événement mouseout est appelé lors de la suppression de l'ancien contenu, puis à nouveau un mouseon quand le nouveau contenu apparaît.

J' ai fait l'essai, ça na va pas mieux en mettant directement onmouseover et onmouseout dans les div conthourxx
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
le père
 
Après réflexion et quelques essais...
Ce n'est pas la suppression de l'ancien contenu qui provoque l'événement mouseout. C'est simplement parce que ton nouveau contenu étant un élément HTML, ce n'est plus l'élément conthourxx qui a le focus, mais ce nouvel élément. Donc il y a bien un événement mouseout pour conthourxx ; cet événement provoque la destruction du <a> à peine créé, et conthourxx retrouve le focus : la boucle est bouclée...
Il serait sûrement plus simple d'utiliser les CSS pour obtenir le même résultat. 
<!DOCTYPE html>
<html>
<!--

  Created using /
  Source can be edited via /untitled/edit

-->
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  .madiv
  {
    width: 180px;
    height: 20px;
    border: 1px dotted orange;
  }
  .madiv a {
   color: #FFFFFF;
   text-decoration: none;
  } 
  .madiv a:hover {
   color: #0000FF;
   text-decoration: underline;
  } 

</style>

</head>

<body>

  <p id="hello" onclick="javacript: affiche();">Hello World</p>
  <div id="parent">
    <div id="conthour14" class="madiv"><a href="http://ww.google.com">Google</a>
    </div>
    <div id="conthour15" class="madiv"><a href="http://ww.google.com">Google</a>
    </div>
    <div id="conthour16" class="madiv"><a href="http://ww.google.com">Google</a>
    </div>
  </div>
</body>
</html>

Mais il y a un inconvénient : le lien ne réagit que si on passe dessus, c'est à dire dans la partie gauche des cases, pas n'importe où.
0
Réponse 6 / 6
Cutya Hair
 
Ahh ok, c'est pour ça que je ne voyais pas l'erreur niveau syntaxe, c'est plus du côté technique là :)
Je te remercie de te donner ce mal pour m'aider, je débute en JS et je cherche à faire un système de sélection de zone (contenant plusieurs div) avec les évènements mouseover et click. Je ne sais pas encore comment m'y prendre donc une première étape était pour moi d'apprendre à utiliser le mouseover comme il faut, mais en bloquant là-dessus je me suis dit que ça servait à rien d'essayer d'apprendre plus si je bloque déjà sur la première étape lol

En tout cas merci :)
0

Discussions similaires

Copier un lien instagram
alaurore -
LEFEUVRE -

7 réponses
Retrouver liens copiés sur le téléphone
SAMA -
Peterson -

3 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses
copie d'un lien dans le navigateur internet
Ulysse Orseau -
diamantnoir -

4 réponses
Faux virus (Pour une blague)
BYHazer -
BYHazer -

2 réponses