C'est une question de débutant, mais j'ai de sérieux problèmes avec ma première tâche JavaScript. J'ai décidé d'apprendre JS et de commencer avec une liste TODO, et je suis maintenant bloqué au tout début.

L'écouteur d'événements qui doit se déclencher lorsque le formulaire est soumis ne fonctionne pas. Lorsque je modifie l'événement, il écoute "cliquer", "concentrer" ou "flouter", cela fonctionne, mais pas avec soumettre. Quelqu'un peut-il être utile?

PS. Y a-t-il une explication simple pour event.preventDefault();? Que fait-il et quand doit-il être utilisé?

Mille mercis.

Mon HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TODO</title>

</head>
<body>
    <div id="headerDiv">
        <h1>My To Do List</h1>
        <form>
            <input aria-label="Add a new task:" type="text" id="newTaskInput" placeholder="Do the laundry, write a new chapter...">
            <input id="submitNewTaskButton" type="submit" value="+">
        </form>
    </div>
    <div id="tasks">
        <ul id="tasksList">
            <li>Do the laundry</li>
            <li>Walk the cat</li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>

Mon JavaScript:

let newTaskInputForm = document.getElementById('newTaskInput');
let tasksList = document.getElementById("tasksList");
let submitNewTaskButton = document.getElementById("submitNewTaskButton");

function submitNewTask() {
    var newTask = newTaskInputForm.value;
    var newListItem = document.createElement("li");
    var newListTextNode = document.createTextNode(newTask);
    newListItem.appendChild(newListTextNode);
    tasksList.appendChild(newListItem);
}

newTaskInputForm.addEventListener('submit', function (event) {
    event.preventDefault();
    submitNewTask(event)
});
0
tomaszn 6 mars 2020 à 19:08

3 réponses

Meilleure réponse

Deux modifications apportées ici, l'écouteur d'événements s'ajoutant à <form> et non à la soumission d'entrée, ont également changé la balise <input> en <button> check this SO question to know the difference between them.

Et pour e.preventDefault (), essentiellement son utilisé pour arrêter le comportement des balises HTML par défaut, par exemple la balise <a> lorsque vous cliquez dessus, ils redirigent parfois les utilisateurs vers une autre page ou un autre domaine, les formulaires soumettent également des actions redirigent généralement la page vers une autre page, e.preventDefault () arrêtera ce comportement et laissera le développeur décider ce qui doit se produire après l'envoi du formulaire, ou lorsque l'on clique sur la balise d'ancrage <a>, quand doit-elle être utilisée: cela dépend de la conception de l'application, donc si l'application sur laquelle vous travaillez nécessite que certaines balises HTML se comportent différemment, par exemple {{X2 }} et <form> balises pour faire des Ajax appels.

let newTaskInputForm = document.getElementById('newTaskInput');
let tasksList = document.getElementById("tasksList");
let submitNewTaskButton = document.getElementById("submitNewTaskButton");

function submitNewTask() {
    var newTask = newTaskInputForm.value;
    var newListItem = document.createElement("li");
    var newListTextNode = document.createTextNode(newTask);
    newListItem.appendChild(newListTextNode);
    tasksList.appendChild(newListItem);
}

document.getElementById('newTaskForm').addEventListener('submit', function (event) {
    event.preventDefault();
    submitNewTask(event)
});
<!DOCTYPE html>
<html lang="en">
<head>
    <title>TODO</title>

</head>
<body>
    <div id="headerDiv">
        <h1>My To Do List</h1>
        <form id="newTaskForm">
            <input aria-label="Add a new task:" type="text" id="newTaskInput" placeholder="Do the laundry, write a new chapter...">
              <button id="submitNewTaskButton" type="submit">+ form</button>
        </form>
    </div>
    <div id="tasks">
        <ul id="tasksList">
            <li>Do the laundry</li>
            <li>Walk the cat</li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
0
Ma'moun othman 6 mars 2020 à 16:30

L'événement submit n'existe que sur l'élément form. Vérifiez ici.

Donc c'est

<html>
...
<form id="form></form>
...

<script>

let form = document.getElementById('form')

form.addEventListener('submit',function(){})

</script>
</html>

Le event.preventDefault() Je pense que c'est mieux expliqué ici.

Bienvenue sur Javascript.

0
Franci 6 mars 2020 à 16:21

Les éléments <input> ne déclenchent pas d'événements submit - c'est le <form> qui fait cela.

(en d'autres termes, vous avez attaché l'auditeur au mauvais élément)

1
Alnitak 6 mars 2020 à 16:12