Poster une réponse 
 
Note de cette discussion :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
Appel à une méthode JS dans une balise (X)HTML
Auteur Message
Plume Hors ligne
Membre

Messages : 377
Inscription : Jul 2008
Réputation : 6
Message : #1
Appel à une méthode JS dans une balise (X)HTML
Plop !

Je préviens tout de suite, je suis néophyte en JS. Je sais faire les trucs de bases - et encore - mais je pêche quand même pas mal quand il s'agit de pousser plus loin - mea culpa de pas m'y être mis plus tôt :]

Bien, pour l'expérience et la découverte, je me suis mis à développer un petit gadget pour un jeu.
J'ai actuellement un formulaire :
Code PHP :
<h2>[C2G]Widget de calcul de la puissance des mages élémentaires</h2>

<
form name="calculPuissanceForm" id="calculPuissanceForm" method="post">
    <
class="noLabel">
        <
label for="planeteCombat">Sur quelle planète se déroule le combat :</label>
        <
select name="planeteCombat" id="planeteCombat">
            <
option value="aquablue">Aquablue</option>
            <
option value="desertica">Desertica</option>
            <
option value="galactica">Galactica</option>
            <
option value="vertana">Vertana</option>
            <
option value="volcano">Volcano</option>
        </
select>
    </
p>
    
    <
p>
        <
label for="nbMageMetal">Nombre de mage(sM&eacute;tal</label> : 
        <
input type="text" name="nbMageMetal" id="nbMageMetal" value="0" />
    </
p>
    
    <
p>
        <
label for="nbMageEau">Nombre de mage(sEau</label> : 
        <
input type="text" name="nbMageEau" id="nbMageEau" value="0" />
    </
p>
    
    <
p>
        <
label for="nbMageTerre">Nombre de mage(sTerre</label> : 
        <
input type="text" name="nbMageTerre" id="nbMageTerre" value="0" />
    </
p>
    
    <
p>
        <
label for="nbMageFeu">Nombre de mage(sFeu</label> : 
        <
input type="text" name="nbMageFeu" id="nbMageFeu" value="0" />
    </
p>
    
    <
p>
        <
label for="nbMageBois">Nombre de mage(sBois</label> : 
        <
input type="text" name="nbMageBois" id="nbMageBois" value="0" />
    </
p>
    
    <
p>
        <
label for="totalDegatsMages">D&eacute;gats des mages</label> : 
        <
input type="text" name="totalDegatsMages" id="totalDegatsMages" value="0" />
    </
p>
</
form

J'ai ensuite développé une classe - encore maigre car je test avant de faire aboutir tout le bouiboui - que voilà :
Code PHP :
// Classe de calcul
CalculPuissance = function(){

    
// Variables
    
this.x                            0;
    
this.y                            0;
    
this.bonus                        0;
    
this.niveauControleElementaire    0;
    
this.planeteCombat                0;
    
this.nbMageMetal                0;
    
this.nbMageEau                    0;
    
this.nbMageTerre                0;
    
this.nbMageFeu                    0;
    
this.nbMageBois                    0;
    
this.totalDegatsMages            0;
    
    
// Méthodes    
    
CalculPuissance.setY = function(){
        if(
this.!= 0){
        
            switch(
this.x){
            
                case 
1:
                    
4;
                    break;
                case 
2:
                    
5;
                    break;
                default:
                    
3;
                    break;                
            }
            
            return 
y;
        }else{
            
            
alert('Error : x not defined');
        }
    }
    
    
CalculPuissance.setPlaneteCombat = function(selectPlaneteCombat){

        
this.planeteCombat selectPlaneteCombat.value;
        
alert(this.planeteCombat);
    }

    
CalculPuissance.getDommages = function(dommages){

        
document.getElementById('totalDegatsMages').value dommages;
    }
}

var 
CalculPuissance = new CalculPuissance(); 

J'aimerais que dans la case totalDegatsMages, il y ait un changement à chaque modification dans les autres cases - y compris le select - et j'ai donc essayé de faire quelque chose comme :
Code PHP :
<input type="text" onKeyUp="CalculPuissance.getDommages(this.value)" name="nbMageMetal" id="nbMageMetal" value="0" /> 

Mais quoi que je fasse, la console me dis que CalculPuissance n'est pas défini. J'aimerais savoir donc comment le faire ?

Merci d'avance !

@tchaOo°


Fichier(s) joint(s)
.html  displayCalculPuissanceForm.html (Taille : 2.97 Ko / Téléchargements : 3)

le Blog de Plume : http://plumeconception.o-n.fr/blog/
(Ce message a été modifié le : 09-24-2008 09:17 AM par Plume.)
09-23-2008 03:38 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
keke Hors ligne
Modérateur
*****

Messages : 1,175
Inscription : Mar 2007
Réputation : 18
Message : #2
RE: Appel à une méthode JS dans une balise (X)HTML
Coucou,

j'y connais rien non plus, mais ici, il y a 2 points ... est-ce normal ?
Citation :CalculPuissance..setY = function(){

Par ailleurs, je connais rien en classe, mais je sais que certains langage oblige à définir un constructeur ...

Bon, je laisse les autres répondre.

kéké

Kéké
Administrateur du jeu médiéval http://www.magdales.com
Papa depuis 18 mois. Modérateur de jeuPHP 34.
En préparation pour ses congés de Noël ... kéké moins actif pendant les congé 34
09-23-2008 04:04 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Plume Hors ligne
Membre

Messages : 377
Inscription : Jul 2008
Réputation : 6
Message : #3
RE: Appel à une méthode JS dans une balise (X)HTML
Plop !

J'ai remarqué effectivement. D'un côté, c'est pas normal mais je le sais, de l'autre c'est normal. C'est une erreur à cause de maints copie/collage. N'avais déjà modifié. T'façon, c'est pas la méthode que j'utilise et ça ne résout évidemment pas la solution. Je sèche réellement. C'est sûrement tout con quand on a l'habitude ( Hein Anthor 1 ) mais pour l'instant, je ne sais pas.

Merci kéké pour la remontée :]

@tchaOo°

[Edition] Je précise que le CSS, le JS et le XHTML sont dans le même fichier :]

[Edition bis] J'ai rajouté le fichier en question en pièce jointe dans le premier billet. Ca vous permet de voir la structure totale du fichier.

[Remontée] 19h plus tard, je me permet de relever le fil :]

le Blog de Plume : http://plumeconception.o-n.fr/blog/
09-24-2008 10:11 AM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Ter Rowan Hors ligne
Membre

Messages : 302
Inscription : Jul 2008
Réputation : 4
Message : #4
RE: Appel à une méthode JS dans une balise (X)HTML
je vais pas répondre dans l'ensemble (car pas sûr d'utiliser la bonne stratégie) simplement les règles que je suis désormais sont :

1) plus rien dans l'html (pas de <input onchange=f(x)> )

2) gérer les événements sur javascript
j'utilise par commodité une librairie mais il est assez simple de le faire (juste faire attention ie et le reste n'utilisent pas la même fonction)

3) du coup ça nous donne
GestionEvent ('id_de_l_input', code_de_l_evenement nom_de_la_fonction)

et tu crées une fonction 'nom_de_la_fonction( e) ' où e porte l'événement

si tu n'as pas besoin de savoir qui porte l'événement (genre y a 8 boutons qui pour le même événement vont avoir le même résultat mais inutile de savoir lequel des boutons a été cliqué) alors c'est une fonction comme une autre. Sinon c'est plus compliqué (enfin j'utilise prototype et du coup c'est pas compliqué)

voilà, c'est juste une réponse superficielle mais ça peut peut être t'aider un peu

a+
09-24-2008 01:34 PM
Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Anthor Hors ligne
Membre

Messages : 521
Inscription : Dec 2007
Réputation : 15
Message : #5
RE: Appel à une méthode JS dans une balise (X)HTML
Je prend ta pièce jointe, je regarde ça dans l'aprèm ou ce soir.

M'enfin au lieu de t'embêter a placer l'objet partout, tu ferais mieux d'utiliser une librairie ou de déporter tes événements.

Anthor |
[Image: 352x90.gif]
(Ce message a été modifié le : 09-24-2008 01:47 PM par Anthor.)
09-24-2008 01:46 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Plume Hors ligne
Membre

Messages : 377
Inscription : Jul 2008
Réputation : 6
Message : #6
RE: Appel à une méthode JS dans une balise (X)HTML
Plop!

Petite précision. La pièce jointe est 'nettoyée'. Donc on ne voit plus l'appel à la méthode dans le XHTML. C'est surtout pour voir la structure du fichier :]

Merci pour votre aide les gens !

@tchaOo°

[Edition] Et pour répondre à Anthor, je ne connais déjà pas JS, j'vais pas m'embêter avec une librairie ou un fw JS :]

le Blog de Plume : http://plumeconception.o-n.fr/blog/
09-24-2008 01:58 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Anthor Hors ligne
Membre

Messages : 521
Inscription : Dec 2007
Réputation : 15
Message : #7
RE: Appel à une méthode JS dans une balise (X)HTML
Ben justement la librairie te permet de passer outre ces connaissances, afin d'appliquer uniquement des méthodes normés.

Bref, au premier regard, change <script language="text/javascript"> par <script type="text/javascript">.

Ça devrait beaucoup mieux fonctionner.

Anthor |
[Image: 352x90.gif]
09-24-2008 02:01 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Plume Hors ligne
Membre

Messages : 377
Inscription : Jul 2008
Réputation : 6
Message : #8
RE: Appel à une méthode JS dans une balise (X)HTML
Aaaah ! Pas folle la guêpe... Merci Anthor, je test ça tout à l'heure et je redis ça.

Concernant la librairie, c'est comme tout, j'estime qu'il faut savoir comment fonctionne un outil pour vraiment le maitriser. Maintenant, j'ai le droit de me tromper ;]

@tchaOo°

le Blog de Plume : http://plumeconception.o-n.fr/blog/
09-24-2008 02:04 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Plume Hors ligne
Membre

Messages : 377
Inscription : Jul 2008
Réputation : 6
Message : #9
RE: Appel à une méthode JS dans une balise (X)HTML
Plop !

T'avais tout bon Anthor. J'ai pas percuté que ça ferait chier car j'avais mis la même chose pour le CSS et ça passait :]
Moi qui m'attendait à une simple grosse incompétence en JS :']

Des avis sur mon point de vue pour l'utilisation d'une librairie ?

@tchaOo°

le Blog de Plume : http://plumeconception.o-n.fr/blog/
09-24-2008 02:58 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
pascal Hors ligne
Membre

Messages : 676
Inscription : Aug 2006
Réputation : 14
Message : #10
RE: Appel à une méthode JS dans une balise (X)HTML
Plume a écrit :Des avis sur mon point de vue pour l'utilisation d'une librairie ?

yo,

je suis pour l'utilisation des frameworks js 10

c'est sûr qu'utiliser sans connaitre c'est pas génial, mais avec des bases en javascript, c'est plus simple de faire un code portable sur les principaux navigateurs avec un FW qu'avec du code from scratch.

la portabilité/ compatibilité est assurée dans les frameworks JS, tandis que pour les bouts de code que l'on trouve à droite à gauche, il y a moins de garanties de compatibilité. en plus les FW sont documentés, que demande le peuple ?

A+

Pascal

Bonnes pratiques SQL - Passer à la POO
présentation
09-24-2008 03:05 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Poster une réponse 



ContactJeuWeb (JeuPHP) - Crée ton jeu par navigateurRetourner en hautRetourner au contenuVersion bas-débit (Archivé)Syndication RSS