Débutant javascript / to do list
droidinou
-
jordane45 Messages postés 40052 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 40052 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
Dans le code reproduit ci-dessous, je ne comprend pas pourquoi quand je clique le bouton delete, le programme fait fonctionner alert ("Are you sure?") et ("Well done") (la deuxième alerte n'étant initialement prévue que lorsque je clique sur l'élément "li").
Merci pour l'aide que vous voudrez bien m'apporter aussi minime soit-elle.
Pour le code disponible aussi sur https://codepen.io/marc-losson/pen/eYdVBrE
html:
<html>
<head>
<title>Javascript + DOM</title>
<link rel="stylesheet" type="text/css" href="cool.css">
</head>
<body>
<h1>TO DO NAR</h1>
<p class="first">A FAIRE!
</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
</ul>
<script type="text/javascript" src="shop.js"></script>
</body>
</html>
Java:
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
function inputLength(){
return input.value.length;
}
function createListElement(){
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
function crossline(){
li.classList.toggle("done");
}
li.addEventListener("click", crossline);
var btn = document.createElement("button");
btn.appendChild(document.createTextNode("delete"));
li.appendChild(btn);
function del(){
li.remove();
}
btn.addEventListener("click", del);
input.value = "";
}
function addListAfterClick(){
if (inputLength() > 0) {
createListElement();
}
}
function addListAfterKeypress(event) {
if (inputLength() > 0 && event.keycode === "enter") {
createListElement();
}
}
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
Dans le code reproduit ci-dessous, je ne comprend pas pourquoi quand je clique le bouton delete, le programme fait fonctionner alert ("Are you sure?") et ("Well done") (la deuxième alerte n'étant initialement prévue que lorsque je clique sur l'élément "li").
Merci pour l'aide que vous voudrez bien m'apporter aussi minime soit-elle.
Pour le code disponible aussi sur https://codepen.io/marc-losson/pen/eYdVBrE
html:
<html>
<head>
<title>Javascript + DOM</title>
<link rel="stylesheet" type="text/css" href="cool.css">
</head>
<body>
<h1>TO DO NAR</h1>
<p class="first">A FAIRE!
</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
</ul>
<script type="text/javascript" src="shop.js"></script>
</body>
</html>
Java:
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
function inputLength(){
return input.value.length;
}
function createListElement(){
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
function crossline(){
li.classList.toggle("done");
}
li.addEventListener("click", crossline);
var btn = document.createElement("button");
btn.appendChild(document.createTextNode("delete"));
li.appendChild(btn);
function del(){
li.remove();
}
btn.addEventListener("click", del);
input.value = "";
}
function addListAfterClick(){
if (inputLength() > 0) {
createListElement();
}
}
function addListAfterKeypress(event) {
if (inputLength() > 0 && event.keycode === "enter") {
createListElement();
}
}
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
Configuration: Windows / Edge 87.0.664.66
A voir également:
- Débutant javascript / to do list
- Qwerty to azerty - Guide
- List disk - Guide
- Directory list & print - Télécharger - Divers Utilitaires
- Do not turn off target traduction - Forum Téléphones & tablettes Android
- Crdownload to mp4 - Forum Téléchargement
1 réponse
Bonjour
Merci de poster ton code correctement sur le forum en utilisant les balises de code.
Explications, à lire entièrement, disponibles ici https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
Merci de poster ton code correctement sur le forum en utilisant les balises de code.
Explications, à lire entièrement, disponibles ici https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
Il faut poursuivre ici !!
Par contre, je t'ai demandé de poster ton code correctement .... merci de le faire si tu veux de l'aide !