18007 sujets

Questions générales et questions de débutants

[Résolu] Affichage HTML et JS

Bonjour,
Je dois être un peu nu ! Ou alors il y a un truc que je n'ai pas compris !
Ici, dans ce code, ça marche !

<html>
<body>

<h2>Ma page test Html avec sript interne </h2>
<p>Premier paragraphe</p>

<p id="demo"></p>
<script type="text/javascript">
var text = 'coucou' + ' toujours';
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>


Et là, mystère !

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="test.js"></script>
<h2>Ma page test Html avec script externe</h2>

<p>Premier paragraphe</p>

<p id='test'></p>

</body>
</html> 




	function test(id)
	{
		var text = 'coucou' + ' toujours';
		document.getElementById(id).innerHTML = text;
        return true;
	};
	test(id);


Quelqu'un pourrait-il éclairer ma lanterne ?
Merci d'avance et cordioles salutation
Horace
Modérateur
Bonjour,

Ton script est lancé avant le chargement complet de la page. Ajoute le en fin de page ou sur l'événement onload.

Cdt
Merci gcyrillus !
L'explication est précise et tout fonctionne comme je le désire !
J'ai fait quelques tests d'école, pour voir si j'avais bien compris !

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="test.js"></script>
<h2>Ma page test Html avec script externe</h2>

<p>Premier paragraphe</p>


<p  id='demo'>
</p>

<p>
<span  id='truc'></span>
</p>

<span id = 'aspan'></span>

<script type="text/javascript">window.onload = test();</script>
</html>

Suivi de 

	function test(id)
	{
		var text = 'coucou' + ' toujours' + ' demo';
		document.getElementById('demo').innerHTML = text;
		var text = 'coucou' + ' toujours' + ' truc';		
		document.getElementById('truc').innerHTML = text;
		var text = 'coucou' + ' toujours' + ' span';		
		document.getElementById('aspan').innerHTML = text;
        return true;
	};

De toutes mes lectures à ce sujet, je n'avais jamais entendu parler du temps d'affichage et de le prompte réaction de JS.
Une fois expliqué par votre réponse :
a écrit :

Ton script est lancé avant le chargement complet de la page. Ajoute le en fin de page ou sur l'événement onload.

tout est devenu clair !
Merci encore
H.
Bonjour,
Je reviens sur ce post !
Les tests ci dessus fonctionnent parfaitement. Et j'ai cru avoir compris le truc ! J'ai donc essayé de transposer cette solution dans mes pages.
Et là ::: Boum, ça ne fonctionne plus !
Aurais-je oublié quelque chose ? Ou alors je n'ai pas tout compris !

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="keywords"/>
	<title>Page de document</title>
	<link rel="icon" type="image/ico" href="images/favicon.ico" />
	<link rel="stylesheet" type="text/css" href="archives.css" />
<!-- Ici le script JS -->
	<script type="text/javascript" src="js/addsource.js"> </script>
	
</head>

<body>

	<div class="global">
<!-- Conteneur de toute la page -->
<!-- Entête -->
		<header class="entete">
			<h1><p> Titre 
			<span id = "libelle"></span>
			</p></h1>

			<h3><p>En date du :
			<span id = "date"></span></h3>
			<h2><span id = "cle"></span>
			<span id = "ext"></span>
			</p></h2>
		</header> 
<!-- Fin d'en-tête -->
	</div>
<!-- Fin du conteneur de toute la page -->
	<div>
<!-- Test PHP -->
<?php
	echo 'Test PHP </br>'."\n";
	echo 'Date '.$_GET['date']."\n";
	echo 'Cle '.$_GET['cle']."\n";
	echo 'Libelle '.$_GET['libelle']."\n";
	echo 'Ext '.$_GET['ext']."\n";
?>
	</div>
<!-- Fin test PHP -->	
	<div>
	<script type="text/javascript">window.onload = addsource();</script>
	</div>

</body>

</html>

et le script js :

	function addsource()
	{
		var parametres = location.search.substring(1).split("&");
		var temp = parametres[0].split("=");
		l = unescape(temp[1]);
		l = l.replace(/\+/g,' ');
		var dat = l;
		document.getElementById("date").innerHTML = dat;
		
		var temp = parametres[1].split("=");
		d = unescape(temp[1]);
		d = d.replace(/\+/g,' ');
		var cle = d;
		document.getElementById("cle").innerHTML = cle;
		
		var temp = parametres[2].split("=");
		c = unescape(temp[1]);
		c = c.replace(/\+/g,' ');
		var texte = c;
		document.getElementById("libelle").innerHTML = texte;

		var temp = parametres[3].split("=");
		e = unescape(temp[1]);
		e = e.replace(/\+/g,' ');
		var ext = e;
		document.getElementById("ext").innerHTML = ext;

		return = true;
	};

Dans l'adresse url, j'ai bien aussi les renseignements désirés :

 http://127.0.0.1/safe/page.php?date=04.09.24&cle=SDA01&libelle=Contrat+original+2004&ext=.jpg&submit=Lire+ce+document

J'ai ajouté une petit test en PHP, pour voir, et j'ai bien le contenu renvoyé par le script !
Alors là, pour moi, grand mystère. Pourtant je ne fais aps grand chose dans le script, ni dan la page Html.
A l'aide, je me noie !
Merci d'avance
H.
Modérateur
Bonsoir,
return = true;

Ce ne serait pas plutôt:
return  true;

ensuite as tu bien dans ta barre d'adresse le ?date=04.09.24&cle=SDA01&libelle=Contrat+original+2004&ext=.jpg&submit=Lire+ce+document que ton script est supposé découper, trier et ré-afficher ?
OK Pour return true !
et le retour, c'est un coupé-collé de url dans l'entête.
C'est exactement ce que m'envoie la page précédente, et ça me convient tout à fait pour la suite du traitement.
C'est le nom d'une image dans un dossier :
04.09.24SDA01Contrat original 2004.jpg
A ton service pour tout renseignement supplémentaire !
Et merci de te pencher sur mon problème !
H.
Modérateur
Bonjour,

pour moi tout semble okay, si le js ne fonctionne pas, c'est peut-être que <script type="text/javascript" src="js/addsource.js"> </script> ne pointe pas sur le fichier attendu au bon endroit.
Modifié par gcyrillus (21 May 2021 - 10:44)
Sujet clos
Aller à