Aide code HTML tout simple [Résolu]

Signaler
-
 Didou97350 -
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 ! :)
Afficher la suite

3 réponses

Réponse 1 / 3
Messages postés
30996
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 janvier 2021
 3 171
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; 
}



Cordialement,
Jordane
Réponse 2 / 3

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 !!

Signaler
Messages postés
30996
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 janvier 2021
 3 171
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>
Signaler
Messages postés
30996
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 janvier 2021
 3 171 >
Messages postés
30996
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 janvier 2021
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>
Signaler
Messages postés
30996
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 janvier 2021
 3 171 >
Messages postés
30996
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 janvier 2021
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

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,
Répondre Posez votre question