Problème avec getElementBy* par mozillo - page 1

J'ai un petit script qui fait apparaitre une image et du texte en dessus de tout : la popup...
Jusqu'ici, le code ne faisait que afficher/masquer la popup, mais j'ai ensuite tenté un affichage plus "stylé"...
Depuis, les getElementBtId et getElementByName ne fonctionnent plus.

Voici mon script.js :

var popupTop =-100;
function showpopup()
{
	popupTop ++;
	window.status=popupTop;
	document.getElementById("popup").style.top=popupTop;
	if (popupTop == 500)
	{
		document.getElementsByName("textPopup").item(0).style.visibility="visible";
	}
	else
	{
		settimeout ("showpopup ()",100);
	}
}

function callPopup (texte)
{
	popupTop=70;
	document.getElementsByName("pop").item(0).style.top=popupTop +"px";
	document.getElementsById("popup").style.visibility="visible";
	document.getElementsByName("textPopup").item(0).innerHTML=texte;
	alert ("blablabla");
	showpopup();
}

function closePopup()
{
	document.getElementById("popup").style.visibility="hidden";
	document.getElementsByName("textPopup").item(0).style.visibility="hidden";
}

Mon user.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<style>
input {background-color:#900;background-image:url(img/input_red_0.png);
}
input:hover {
	background-image:url(img/input_red_1.png);
}
input:focus {
	background-color:transparent;}
</style><link href="style.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="menu/red/cbcscbmenu.css" type="text/css" /></head><body background="img/wood_red.jpg"><script language="javascript">callPopup ("Votre texte ici")</script><center><img src="img/ban.jpg" height="250px" width="600px" border="15px">
<ul id="cbmenuebul_table" class="cbmenuebul_menulist" style="width: 550px; height: 26px;">
  <li class="spaced_li"><a href="index.php?color=red"><img id="cbi_cbmenu_1" src="menu/red/ebbtcbmenu1_0.png" name="ebbcbmenu_1" width="110" height="26" style="vertical-align: bottom;" border="0" alt="~[Acceuil]~" title="" /></a></li>
  <li class="spaced_li"><a href="play.php"><img id="cbi_cbmenu_2" src="menu/red/ebbtcbmenu2_0.png" name="ebbcbmenu_2" width="110" height="26" style="vertical-align: bottom;" border="0" alt="~[Jouer]~" title="" /></a></li>
  <li class="spaced_li"><a href="rules.php"><img id="cbi_cbmenu_3" src="menu/red/ebbtcbmenu3_0.png" name="ebbcbmenu_3" width="110" height="26" style="vertical-align: bottom;" border="0" alt="~[Rèles]~" title="" /></a></li>
  <li class="spaced_li"><a href="user.php"><img id="cbi_cbmenu_4" src="menu/red/ebbtcbmenu4_0.png" name="ebbcbmenu_4" width="110" height="26" style="vertical-align: bottom;" border="0" alt="~[Connexion]~" title="" /></a></li>
  <li><a href="user.php?action=register"><img id="cbi_cbmenu_5" src="menu/red/ebbtcbmenu5_0.png" name="ebbcbmenu_5" width="110" height="26" style="vertical-align: bottom;" border="0" alt="~[S'inscrire]~" title="" /></a></li>
</ul>
<script type="text/javascript" src="menu/red/cbjscbmenu.js"></script><img src="img/popup_red_1.jpg" id="precharge"/><map name="exit_popup"><area shape="rect" coords="100,190,0,330" href="javascript:closePopup();" onmouseover="document.getElementsByName('pop').item(0).src='img/popup_red_1.jpg'" onmouseout="document.getElementsByName('pop').item(0).src='img/popup_red.jpg'" /></map><span id="popup"><img src="img/popup_red.jpg" usemap="#exit_popup" name="pop" /><div name="textPopup" id="textPopup" />test</div></span></center>
</body></html>

Ton HTML est particulièrement illisible...

Tu as un problème d'ordre pour exécuter tes scripts: ligne 15 tu appelles callPopup or le reste du DOM n'est pas encore chargé.
Donc lorsque tu essaie d'accéder à ces éléments (que ce soit avec getElementBtId ou getElementByName) il ne trouve pas les éléments en question (puisqu'ils n'ont pas encore été créés).
Pour corriger ton problème, mets ton script à la fin de la page (juste avant le </body>) ou alors utilises window.onload pour n'exécuter le script que lorsque ton document est chargé)

Sinon dans ton script JS, ligne 13, écrit

setTimeout(showpopup,100);

ça marchera mieux (les majuscules et minuscules sont importantes, et il est préférable de donner une référence à une fonction plutôt que d'utiliser une chaine de caractère (sinon cela demande un traitement d'évaluation en plus))

Problème avec getElementBy*

Problème avec getElementBy*

Supprimer

Modérer

Signaler le message aux modérateurs