Convertit html4/js en js externe et html5

Sujet résolu

19 février 2017 à 11:24:02

Bonjour,

Je suis actuellement en formation à l'afpa et ils nous ont donné des exercices non mis à jour et la correction également.

Donc on plante sur certains exo et notamment celui-ci :

Réalisez un petit formulaire Html valide qui demande la saisie d’un texte puis qui contrôle le

texte saisi quand l’utilisateur clique un bouton :

· Si le nombre de caractères saisi est inférieur à 2, affichez une alerte et terminer.

· Sinon, affichez le texte saisi et déclenchez l’action associée au form Html (par exemple

http://www.afpa.fr).

Testez les 3 méthodes pour capturer l’événement clic du bouton :

- L’attribut « onclick » Html

- La propriété onclick sur l’objet du DOM représenté par le bouton.

- La méthode addEventListener(‘click’, …) sur l’objet bouton.

Bon pour le onclick sur html pas de souci ça marche.pour les deux autres tous mes tests ne fonctionnent pas (m^me en mettant onload dans le body

Je vous fourni le code html fourni :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript - Contrôle Formulaire</title>
</head>
<body>
<h2>Contrôle Formulaire</h2>
Saisissez un texte puis pressez le bouton 'Contrôle'<br />
<form id="formsaisie" action="http://www.afpa.fr" method="get">
<input type="text" id="txt" name="txtSaisie" size="20" />
<br />
<!-- construction classique -->
<input type="submit" value="Contrôler1" onclick="return
verifForm(this.form.txtSaisie.value);" />
<!-- variante JS moderne -->
<input type="button" id="btnDOM0" value="Contrôler2" />
<input type="button" id="btnDOM2" value="Contrôler3" />
</form>
</body>
</html>

et le javascript des corrections mais eux ils le font dans le <script> du html ... or nous on veut faire comme il faut dans un fichier js à part.

Je vous fourni le code Javascript donné pour le DOM0 et DOM2

// variante JS moderne
var verifForm2 = function() {
var txt = document.getElementById("txt").value;
if(txt.length < 2)
{
alert("La chaîne doit comporter au moins 2 caractères.");
}
else
{
alert("Vous avez saisi : '" + txt + "'");
document.getElementById('formsaisie').submit(); // soumission du form
}
};
// variante JS moderne : activation capture événements
var btnDOM0 = document.getElementById("btnDOM0");
btnDOM0.onclick = verifForm2;
var btnDOM2 = document.getElementById("btnDOM2");
btnDOM2.addEventListener("click",verifForm2, false);

J'ai tout essayé en déclarant mes variables dés le début ,en mettant une fonction load etc ,rien mais vraiment rien ne foncrtionne 3 jours que j'y suis dessus

Merci par avance de votre aide ...

-
Edité par MarinaGayraud 19 février 2017 à 11:26:02

KorHosik

19 février 2017 à 11:35:46

Pour que ton JavaScript soit actif sur ton HTML, il faut le référencer dans ta page, toujours avec la balise `<script>`.

Le cours JS propose un exemple d'utilisation de cette balise pour inclure un fichier externe.

MarinaGayraud

19 février 2017 à 11:43:03

C'est ce que j'ai fait ,là y a pas de souci je sais comment appeler un fichier js externe

Après c'est convertir le code fourni pour que cela fonctionne

KorHosik

19 février 2017 à 11:45:01

Tu n'as normalement pas besoin de "convertir" le code du script

Où as-tu insérer la balise <script> ?

Si tu l'as mise dans le <head>, tu dois attendre que le body soit chargé avant d'exécuter ton code.

Si tu l'as mise juste avant la fermeture du body (</body>), ça devrait marcher sans soucis.

MarinaGayraud

19 février 2017 à 12:52:31

Dans le head comme d'habitude .

Aparrement c'est les variables qui posent problème ,et comme je disais m^me avec body onload=load() ,cela ne fonctionne pas

Je te conseille d'essayer,tu verras que cela ne fonctionne pas

KorHosik

19 février 2017 à 12:56:11

Du coup, comme je te l'ai dit, tu as deux solutions :

1° Soit tu places le script juste avant la fin du body.

2° Soit tu gardes dans le head, et dans ce cas tu dois attendre que le body soit chargé avant d'exécuter le code. Pour se faire, il faut modifier le fichier JS et englober tout son contenu dans cet appel :

 document.onload = function() {
   // Ton code JS
};

MarinaGayraud

19 février 2017 à 13:09:31

je l'ai fait ,je viens de le dire,j'ai m^me commencé par ça car on l'avait fait sur l'exo d'avant ............ ca ne marche pas quand m^me

-
Edité par MarinaGayraud 19 février 2017 à 13:10:19

KorHosik

19 février 2017 à 13:44:28

Hé bien montre-nous le code contenant la solution que j'ai proposé et que tu as testé. Sans ça, on ne pourra pas t'aider plus.

MarinaGayraud

19 février 2017 à 20:35:34

sujet résolu ,je devais effectivement mett l'appel du fichier js avant la fermeture du </body> mais aussi déclaré mes variables dès le début