Bonjour a tous,

je but sur un problème surement simple à résoudre mais malgré mes recherches, je rame...

Je vais simplifier grandement dans mon exemple mais en gros le fonctionnement reste le même :

J'ai 2 pages HTML "index.html" et "page2.html"
J'ai 2 fichiers css "style.css" et "page2.css" (dans mon cas, c'est important d'en avoir 2...)
J'ai 1 fichier javascript "code.js"

Dans ma page index.html, j'ai un bouton avec une propriété onclick="texteEnRouge()" et avec id="monBouton".
J'ai également une balise <iframe> qui m'affiche la page "page2.html".
Dans le <head> de ma page "page2.html", j'appelle mon fichiers "style.css" et à la fin de mon <body>, j'appelle bien mon "code.js"

Dans ma page "page2.html", j'ai un texte dans une balise <p> avec un id="monText"
Dans le <head> de ma page "page2.html", j'appelle mon fichiers "page2.css".

dans mon "page2.css" j'ai juste un style pour mettre mon texte en bleu, jusque-là pas de problème
p{color:blue;}

Dans mon fichier "code.js", j'ai la fonction appelée par mon bouton :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
let var_text = document.getElementById("monText");
let var_button =  document.getElementById("monBouton");
monBouton.addEventListener("click", function(){
var_text.style.color='red';
})
Bien sûr, ça ne fonctionne pas alors que si je mets mon bouton dans "page2.html", ça fonctionne, même depuis la page index, à travers le iframe (en appelant mon code.js dans le fichier page2.html).

En fait, lancer un script depuis une page pour interagir sur le css d'une autre page, ça n'a pas l'air de prendre... j'imagine qu'il n'arrive pas à trouver mon id du texte qui se trouve sur une autre page.

quelqu'un aurait une idée ?

merci d'avance.