Aide code HTML tout simple

Résolu/Fermé

Didou97350 - Modifié le 12 janv. 2021 à 21:24
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 asci - Guide
Editeur html - Télécharger - HTML
Code puk bloqué - Guide
Code telephone oublié - Guide
Code blocks free - Télécharger - Langages

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
Modifié le 12 janv. 2021 à 21:30

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
Modifié le 12 janv. 2021 à 22:26

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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
12 janv. 2021 à 22:25

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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
12 janv. 2021 à 22:30

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>

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
12 janv. 2021 à 23:06

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

Code de renvoi d'appel : Ooredo, Mobilis...

Espace en HTML

Acces à snapchat temporairement désactivé

code d'activation GTA 5 steam

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

Discussions similaires

Newsletters