Modification de l'affichage d'une page Web

Sujet résolu

16 décembre 2010 à 21:25:42

Bonjour,

Je suis tombé sur ce site en cherchant une info bien précise, donc me voila inscrit et prêt à quémander l'aide dont j'ai besoin.

J'ai besoin de modifier l'affichage d'une page web et je le fait via GreaseMonkey. Voila mon code actuellement :

/* Supprime le nombre de joueurs connectés */
var SuppConected = document.getElementsByClassName("info4")[0];
var parentSuppConected = SuppConected.parentNode;
parentSuppConected.removeChild(SuppConected);
/* Changement de localisation à l'écran */
var InfoConnected = document.getElementById("notification").getElementsByClassName("info4");
alert(InfoConnected);
document.getElementsByClassName("info2")0].innerHTML=document.getElementsByClassName("info2")[0].innerHTML+" - "+InfoConnected;

Malheureusement , l'alerte me renvoie :

Citation : Windows

[object XPCNativeWrapper [object HTMLCollection]]

Je n'arrive donc pas à prendre le contenu de la balise de classe "info4" qui ,en regardant dans le code source de la page , est :

Citation : Firefox

<div class="info4">689 connectés</div>

J'ai pas mal cherché sur le net et les explications que j'ai trouvées ne m'ont pas aidées donc je souhaite m'adresser à des Hommes pour obtenir une réponse (et pas un bot qui me dise de rechercher mieu).

Merci d'avance à ceux qui prendrons la peine de me répondre

lolown

16 décembre 2010 à 21:47:38

Peux-tu nous donner la référence du code source généré par ta page s.v.p. ?

blaireauman

16 décembre 2010 à 23:22:12

Hello,

Je ne connais pas le terme "référence" donc je l'interprète à ma façon et je t'envoie cela (si ce n'est pas ce que tu souhaites, merci de préciser ta demande

)

<div class="menu2">
            
                <div class="menuform">
                    <div class="info2">Bienvenue,<a class="maitre" href="/user/735070"> Joueur XXXX</a></div>

                    <a href="/user/logout" onclick="return confirm('Confirmer cette action ?')">Déconnexion</a>
                </div>
                <div class="menulog">
                        <div class="info3"> 21:34</div>
                        <div class="info4">648 connectés</div>
                </div>
            
            
        </div>

lolown

17 décembre 2010 à 3:46:38

1. Où vois-tu l'id notification ?
2. Ligne 8:

document.getElementsByClassName("info2")0]
// Devrait donner
document.getElementsByClassName("info2")[0]

3. Peux-tu donner le lien, question de faire des tests ?

blaireauman

17 décembre 2010 à 13:15:56

Le lien du site en question : DinoRPG ; mais il faut être loggé pour voir le code que j'ai mis en premier spoiler; dans le second, je te met le code de la même balise quand l'on n'est pas loggé

Voila ce que tu désire avec l'apparition de la balise notification. (désolé comme le contenu ne concerne pas mes manipulations je n'avais pas pensé à te le mettre)

Quand on est loggé :

<body class="">
        <div id="notification">
            
            
            
        </div>

        <div class="log">
            <div class="mtlogo" id="mtlogo">
                <script type="text/javascript" src="http://trax.motion-twin.com/words/drpg/0"></script>
            </div>
            
            <div>
    <div class="menu2">
            
                <div class="menuform">
                    <div class="info2">Bienvenue,<a class="maitre" href="/user/735070"> Maître gatsu94</a></div>

                    <a href="/user/logout" onclick="return confirm('Confirmer cette action ?')">Déconnexion</a>
                </div>
                <div class="menulog">
                        <div class="info3"> 13:09</div>
                        <div class="info4">523 connectés</div>
                </div>
            
            
        </div>

</div>

Quand on n'est pas loggé :

<body class="">
        <div id="notification">
            
            
            
        </div>

        <div class="log">
            <div class="mtlogo" id="mtlogo">
                <script type="text/javascript" src="http://trax.motion-twin.com/words/drpg/0"></script>
            </div>
            
            <div class="lang2">
                <ul>
                    <li><a href="http://en.dinorpg.com" onmouseover="mt.js.Tip.show(this,'&lt;div class=\'content\'&gt;Click here to play DinoRPG in &lt;em&gt;English&lt;/em&gt;&lt;/div&gt;','smallTip')" onmouseout="mt.js.Tip.hide()"><img src="/img/design/flag_en.gif"/></a></li>
                    <li><a href="http://www.dinorpg.com" onmouseover="mt.js.Tip.show(this,'&lt;div class=\'content\'&gt;Cliquez ici pour jouer DinoRPG en &lt;em&gt;Français&lt;/em&gt;&lt;/div&gt;','smallTip')" onmouseout="mt.js.Tip.hide()"><img src="/img/design/flag_france.gif"/></a></li>

                    <li><a href="http://es.dinorpg.com" onmouseover="mt.js.Tip.show(this,'&lt;div class=\'content\'&gt;Haz clic aquí para jugar a DinoRPG en &lt;em&gt;español&lt;/em&gt;&lt;/div&gt;','smallTip')" onmouseout="mt.js.Tip.hide()"><img src="/img/design/flag_espagne.gif"/></a></li>
                    <li><a href="http://www.dinorpg.de" onmouseover="mt.js.Tip.show(this,'&lt;div class=\'content\'&gt;Klicke bitte hier, um DinoRPG auf &lt;em&gt;Deutsch&lt;/em&gt; zu spielen.&lt;/div&gt;','smallTip')" onmouseout="mt.js.Tip.hide()"><img src="/img/design/flag_de.gif"/></a></li>
                </ul>
            </div>
            
            <div>
    <div class="menu2">
            
                <form class="menuform" method="post" action="/user/login">
                    <label class="info2" for="login">Mon compte:</label> <input class="green" type="text" name="login" value=""/>

                    <label class="info2" for="pass">Code secret:</label> <input class="green" type="password" name="pass" value=""/>
                    <input class="btgreen bttexte" type="submit" name="submit" value="Entrer"/>
                </form>
            
            
        </div>
</div>

Au passage : merci de prendre le temps de me répondre sur une question si basique si j'en crois ce que je vois dans les autres topics

lolown

17 décembre 2010 à 23:09:43

function cC()
{
	/* Supprime le nombre de joueurs connectés */
	var InfoConected = document.getElementsByClassName("info4")[0];
	var SuppConected = document.getElementsByClassName("info4")[0];
	var parentSuppConected = SuppConected.parentNode;
	parentSuppConected.removeChild(SuppConected);
	/* Changement de localisation à l'écran */
	document.getElementsByClassName("info2")[0].innerHTML=document.getElementsByClassName("info2")[0].innerHTML+" - "+InfoConected.innerHTML;

}

Voilà, dis-moi si ça marche, car moi j'ai fait cet essai sur le code html que tu m'as donné ^^'
En passant, ne nomme pas tes variables en commençant par une majuscule, par convention

blaireauman

18 décembre 2010 à 13:52:32

Un grand merci à lolown

J'ai pris note de tes remarques et je me potasse les tutoriaux javascript (très bien fait) car l'apprentissage en solo en observant les codes à des limites (en tous cas pour moi car j'ai appris plein de choses dans les tutos du site et je continue)

J'ai modifié mes variables dans mon code et plus de MAJ au début, et comme ton code fonctionne sans problème, je réfléchirais à comment changer la mise en forme une fois tous les tutos finis car je rajoute des informations à la place du nombre de connectés et ce n'est pas très beau (mais fonctionnel pour le moment cela me suffit

)
J'ai également supprimé

var InfoConected = document.getElementsByClassName("info4")[0];

qui est superflu , je le rajouterais plus tard si je manipule infoConnected.

Bonne journée, je met un résolu sur le sujet