11484 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J'ai créé un petit code (je suis débutant en JS) pour valider un mail que s'il est gmail ou outlook (sinon le mail n'est pas inclus dans la liste qui se créée au fur et à mesure). Or, bien que mes conditions soient bonnes, cela fait le contraire, ça me bloque les gmail et outlook (!) Pourriez-vous m'aider à trouver mon erreur s'il vous plaît ? Merci par avance !



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Validaion mail</title>
</head>

<body>

    <h1>Validation de votre adresse mail</h1>

    <div>
        <form class="container" action="" name=form id="form">
            <label for="email">Votre e-mail : </label>
            <input type="text" name="email" id="email" value=""> <br>
            <br>
            <button onclick="ajout()">Ajouter</button>
        </form>
    </div> <br>

    <ul>
    </ul>

    <script>

        const list = document.querySelector('ul');
        const input = document.getElementById('mail');
        const button = document.querySelector('button');
        const form = document.getElementById('form');

        button.onclick = function ajout() {
  
              if ((form.email.value.split('@')[1] != "gmail.com") || (form.email.value.split('@')[1] != "outlook.fr")) {
                  alert("L'adresse mail doit être une adresse gmail ou outlook");
                  return false;
              } 


            let myItem = input.value;

            const listItem = document.createElement('li');
            const listText = document.createElement('span');
            const listBtn = document.createElement('button');




            listItem.appendChild(listText);
            listText.textContent = myItem;
            listItem.appendChild(listBtn);
            listBtn.textContent = 'Delete';
            list.appendChild(listItem);
            listText.setAttribute('id', 'span');
            listText.setAttribute('class', 'rouge');

            listBtn.onclick = function () {
                list.removeChild(listItem);
                input.value = ''
            }
            input.value = '';
            input.focus();
        }

    </script>




</body>

</html>

"classique"

(form.email.value.split('@')[1] != "gmail.com") || (form.email.value.split('@')[1] != "outlook.fr")

si égal à "gmail.com" c'est différent de "outlook.fr"
si égal à "outlook.fr" c'est différent de "gmail.com"
sinon, différent de l'un et l'autre

(form.email.value.split('@')[1] != "gmail.com") && (form.email.value.split('@')[1] != "outlook.fr")


sans préjuger du reste
@+
Un grand merci à toi ! Effectivement cette fois le mail est pris =)
Par contre ma liste en-dessous n'est plus créée, ça me laisse une page blanche :o Je comprends pas, mon code est bon sur le papier pourtant Smiley ohwell
multiples erreurs
par exemple :
const input = document.getElementById('mail');
or, id='email'
"tout" revérifier, ligne par ligne
+ formulaire exécutera action="", donc rechargera la page
sauf si return false;
courage, pas grand chose pour finir