Script fonctionne que si il se trouve après l'élément

**Couin** · 10/03/2019, 18h27

Hello

Je suis Couin, de l'Essonne (91), passionné de divers bricolages en tout genre, un peu d'informatique aussi

Et aujourd'hui je bute sur un problème qui fera l'objet de mon (il me semble, lol) premier message .

Voilà, je veux changer la couleur de fond d'un champ input suite à une opération, mais cela ne marche pas.

J'ai donc fouiné sur le net, j'ai fais un script minimaliste pour que le champ soit coloré au chargement de la page.

La seule façon qui a donné un résultat est de mettre le script après l'élement :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bla</title>
</head>  
<body>
<input type="text" id="champ" value="">
<script type="text/javascript">
        document.getElementById("champ").style.backgroundColor = "yellow";
</script>
</body>
</html>

Là ca marche, le champ a le fond jaune.

Si je mets le script avant le input, (que ce soit dans le body ou le head), il ne se passe rien.
Idem si je fait directement un onclik dans la balise input.

Si je mets un témoin alert comme ceci :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bla</title>
<script type="text/javascript">
alert('poc');
document.getElementById("champ").style.backgroundColor = "yellow";
</script>
</head>  
<body>
<input type="text" id="champ" value="">
</body>
</html>

J'ai bien l'alert qui s'affiche mais le champ reste blanc.

Si quelqu'un a une idée , je suis preneur

Merci et à bientôt !

Couin

**Beginner.** · 10/03/2019, 18h36

Salut,

Je n'ai pas compris quelle était la question ?

Sinon ce que tu décris est normal un script qui agit sur des éléments du DOM doit être exécuté après que ces derniers aient été chargés dans le DOM et pour ce faire tu as plusieurs manières, tu peux placer le script après les éléments sur lesquels il agit ou utiliser par exemple l’évènement onload...

**danielhagnoul** · 10/03/2019, 18h54

Le comportement est normal, dans le deuxième cas vous sélectionner un ID qui n'existe pas encore !

Vous devez exécuter votre code après la construction du DOM :

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
<script defer>
document.addEventListener('DOMContentLoaded', ev => {
    // le DOM est construit, la page web n'est pas visible
 
    // votre code
    document.getElementById("champ").style.backgroundColor = "yellow";
 
}, {
    capture: false,
    passive: true,
    once: false
});
 
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // votre code
}, {
    capture: false,
    passive: true,
    once: false
});
</script>

**Couin** · 11/03/2019, 03h36

Hello,

Merci pour vos réponses rapides

En effet le code de l'exemple fonctionne .

Dans mon utilisation finale, je vais essayer d'expliquer car c'est un pneu tordu lol

Il s'agit de lister des titres de disque à la demande (site webradio), et de faire la demande d'un titre souhaité.

En gros j’ai une page index.php avec quelques scripts qui appellent une page srch.php (via ajax), avec divers variables POST.
La page srch.php inclut plusieurs parties, chacune étant sollicitée selon le type de variables passées en POST :
- Lister les titres en fonction de la recherche et de la page (car on affiche 15 titres par page donc si la recherche donne plsu de 15 titres, il y a autant de pages que nécessaires).
- Afficher un formulaire lorsqu'on souhaite demander un titre. Dans le formulaire, on doit mettre le nom du demandeur, pour qui est la musique, et si on veut mettre un petit message avec. Les deux premiers champs sont obligatoire. Le formulaire n'est pas de type "form" car le submit rechargeait toute la page (index.php) à la validation et ca ne me plaisait pas. Le bouton de validation appelle simplement une fonction javascript.
- Récupérer les valeurs des champs du formulaire lorsqu'on clique sur le bouton de validation. Si l'un des champs obligatoires est vide, une petite infobulle l'indique, et quand on ferme la bulle, le champ à remplir se mets en rouge. L'idée étant que lorsque l'on clique sur le champs à remplir, il repasse en blanc.
- Si les champs sont remplis, la page analyse les données via diverses requêtes, enregistre la demande si les données sont valides, et affiche le résultat (succès ou erreur).

Donc finalement j'ai mis la fonction de colorisation des champs, à la suite de la partie "formulaire" et non plus dans index.php . Ainsi, les champs sont existants lorsqu'on arrive à la fonction javascript.

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
function bgfield(elm,col,value) {
	if ( value != '') {
	document.getElementById(elm).style.backgroundColor = col;
	}
}
</script>

elm désigne l'élement, col, la couleur, et value, la valeur du champs input.

J'ai une autre petite question mais je vais ouvrir un nouveau sujet pour pas que ce soit hors sujet par rapport à celui ci.

Merci en tout cas

A bientôt

Script fonctionne que si il se trouve après l'élément

JavaScript

Discussions similaires

Partager

Partager