Bonjour à tous,
Lorsque j'essaie de récupérer du texte dans un input, il me renvoie la propriété undefined. Je n'arrive pas à comprendre pourquoi...
Voici mon code :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial scale=1"> <link href="style.css" rel="stylesheet"> <title>tuto</title> </head> <body> <section class="section"> <div class="container"> <h1 class="title"> TO DO LIST</h1> <div class="wrapperContent"> <input id="inputVal" type="text" placeholder="Ecrivez ce que vous devez faire "> <input class="submit" type="submit" value="Submit"> </div> </div> <div id="div"></div> </section> </body> <script type="text/javascript" src="script.js"></script> </html>
mon élément <li> quand je log la console est :<li>undefined</li>, alors que selon moi il devrait contenir le texte mis dans l'input...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 const inputVal = document.getElementById("inputVal"); const submitBtn = document.querySelector('.submit'); let elt = document.querySelector(".wrapperContent"); let inputContent = "" inputVal.addEventListener('input', function(e){ inputContent = e.target.value; console.log(inputContent); }); submitBtn.addEventListener('click', function() { const todoDiv = document.createElement('div'); todoDiv.classList.add('todo'); console.log(todoDiv); const newTodo = document.createElement('li'); newTodo.innerText = inputContent.value; newTodo.classList.add('todo_item'); todoDiv.appendChild(newTodo); if(inputContent.value === "") { return null } });
Partager