Aide code HTML tout simple

Résolu

Didou97350 -
Didou97350 - 12 janv. 2021 à 23:06

Bonsoir à tous !

Je viens à vous car je m'arrache les cheveux depuis 3 bonnes heures, et ai effectué déjà pas mal de recherche... en vain...

(Je suis 95% novice en HTML).

L'idée est de faire une page avec 3 "mots de passes" prédéfinis à l'avance dans le code. Une entrée de texte, ainsi qu'un bouton de validation sont présent sur celle-ci.

Dès lors qu'un des 3 mots est rentré, puis validé via le bouton, nous sommes redirigé vers une page web prédéfinie.

Ci-dessous mon code (qui risque de vous faire marrer :lol:) :

 

<form>

    <div>
    
    <input type="text" name="Enter_the_word" id="test" placeholder="Enter_the_word" required><br>

      <br>

      <button type="submit" style="background-color: blue; color: yellow" onclick="myFunction()">VALIDER</button>
         
    </div>

  <head>
  
    <script>
    
      function myFunction(){
        if (document.getElementById("test").value != "mot1") {
        
        location.href = "https://www.exemple1.com/";
                 
        } else if (document.getElementById("test").value == "mot2") {
          location.href = "https://www.exemple2.com/";
                   
        }  else if (document.getElementById("test").value == "mot3") {
          location.href = "https://www.exemple3.com/";
        }
        
      }
    </script>

</head>

</form>

Je vous remercie d'avance pour l'aide apportée ! :)

A voir également:

Aide code HTML tout simple
Code ascii - Guide
Iphone 14 simple - Guide
Code puk bloqué - Guide
Code deverouillage telephone perdu - Guide
Code activation windows 10 - Guide

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention 4 746

Bonjour,

NOT EQUAL ( != ) ?

if (document.getElementById("test").value != "mot1") {

A mon avis.. c'est

if (document.getElementById("test").value == "mot1") {

PS: ta question concerne du javascript ... pas du html
je déplace donc dans le forum JS

PS²: Ton code pourrais s'acrire plus "proprement" comme ceci

function myFunction(){
  var testValue = document.getElementById("test").value;
  var redirectTo = "";
  switch(testValue){
    case "mot1":
      redirectTo = "https://www.exemple1.com/";
      break;
    case "mot2":
      redirectTo = "https://www.exemple2.com/";
      break;
    case "mot3":
      redirectTo = "https://www.exemple3.com/";
      break;
    default: // si aucun des mots ...
      return false;
      break;
  }
  location.href = redirectTo; 
}

Réponse 2 / 3

Didou97350

Bonsoir, merci pour la réponse !

Alors je viens de tester, mais même problème, j'ai un message m'informant l'erreur 404 : Page not found, quelque soit ce que je tape dans l'entrée de texte...

Mon code mis à jour :


<form>

    <div>
    
    <input type="text" name="Enter_the_word" id="test" placeholder="Enter_the_word" required><br>

      <br>

      <button type="submit" style="background-color: blue; color: yellow" onclick="myFunction()">VALIDER</button>
         
    </div>

  <head>
  
    <script>
    
      function myFunction(){
  var testValue = document.getElementById("test").value;
  var redirectTo = "";
  switch(testValue){
    case "mot1":
      redirectTo = "https://www.exemple1.com/";
      break;
    case "mot2":
      redirectTo = "https://www.exemple2.com/";
      break;
    case "mot3":
      redirectTo = "https://www.exemple3.com/";
      break;
    default: // si aucun des mots ...
      return false;
      break;
  }
  location.href = redirectTo; 
  
  
}
    </script>

</head>

</form>

Je commence réellement à sécher..

EDIT : Correction des balises de code.... encore !!

jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention 4 746

Ben, lorsque tu as ton 404 .. tu as quoi comme adresse au niveau de l'url de ton navigateur ?

par ce que je doute que les sites exemple1 2 et 3 ... existent....
Donc c'est un peu normal qu'il ne les trouve pas non ?

Ah, et aussi, change le "type" de ton bouton ... en button et non en submit

 <button type="button"  name="Enter_the_word" id="test" placeholder="Enter_the_word" required><br>

jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention 4 746 > jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention

Ton code html est foireux également....
comment peux tu avoir des balises <head> après du html ....?

<!Doctype>
<html>
  <head>
    <title>TEST</title>
     <meta charset="utf-8">
   </head>
   <body>
     <form>
       <div>
         <input type="text" name="Enter_the_word" id="test" placeholder="Enter_the_word" required><br>
         <br>
         <button type="button" style="background-color: blue; color: yellow" onclick="myFunction()">VALIDER</button>
       </div>
     </form>

    <!-- Toujours placer le JS avant le </body> ... après tout ton html !! -->
    <script>
      function myFunction(){
        var testValue = document.getElementById("test").value;
        var redirectTo = "";
        switch(testValue){
          case "mot1":
            redirectTo = "https://www.exemple1.com/";
            break;
          case "mot2":
            redirectTo = "https://www.exemple2.com/";
            break;
          case "mot3":
            redirectTo = "https://www.exemple3.com/";
            break;
          default: // si aucun des mots ...
            return false;
            break;
        }
        location.href = redirectTo; 
      }
    </script>
   </body>
</html>

jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention 4 746 > jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention

Dernière petite chose, pour les prochains codes que tu posteras sur le forum ... il faut, dans les balises de code, préciser le langage afin d'avoir la coloration syntaxique
Explications (à lire ENTIEREMENT !! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Réponse 3 / 3

Didou97350

Je viens de tester ton code, et celui-ci fonctionne à merveille, un grand merci pour ton aide !

Je prend note, je me dirige vers ton lien.

Bonne soirée,

Discussions similaires

sertissage des cables rj45

EDIT : Correction des balises de code.... encore !!

Votre réponse

Discussions similaires