+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Toggle logic (/showthread.php?tid=2680)
Toggle logic - chunked - 25.11.2023
Hallo,
ich habe Probleme nachzuvollziehen, wieso meine Toggle Logik nicht wie erwartet funktioniert:
hier mein Skript:
Code:
'use strict';
document.addEventListener("DOMContentLoaded", () => {
const toggles = document.getElementsByClassName("toggle")
//iteriere über die Elemente
for(const toggle of toggles){
//auf event reagieren
toggle.addEventListener("click",() =>{
// console.log("Wurde geklickt aktuell" + toggle.checked)
// toggle.checked = !toggle.checked
// console.log("Wurde geklickt danach" + toggle.checked)
console.log("Wurde geklickt aktuell" + toggle.checked)
toggle.checked = (!toggle.checked)
console.log("Wurde geklickt danach" + toggle.checked)
})
}
});Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<!-- CSS overrides - remove if you don't need it -->
</head>
<body>
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus>
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<section class="main">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
<li class="completed">
<div class="view">
<input class="toggle" type="checkbox" checked>
<label>Taste JavaScript</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
<li class="completed">
<div class="view">
<input class="toggle" type="checkbox">
<label>Buy a unicorn</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Rule the web">
</li>
</ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer class="footer">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><strong>0</strong> item left</span>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed">Clear completed</button>
</footer>
</section>
<footer class="info">
<!-- Change this out with your name and url ↓ -->
<p>Created by <a href="http://todomvc.com">you</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- Scripts here. Don't remove ↓ -->
<script src="./node_modules\todomvc-common\base.js"></script>
<script src="js/app.js"></script>
</body>
</html>ich habe hier auch mal ein Bild gemacht, bei dem ich die Konsolenausgabe ganz interessant finde. Es wird immer true dann false ausgegebeb. Eigentlich sollte ja dann als nächstes false dann true sein.
![[Bild: Nz5AMJV]](https://imgur.com/a/Nz5AMJV)
danke schonmal für die Hife.
RE: Toggle logic - rzscout - 26.11.2023
Ich weiß nicht genau was du erreichen möchtest, aber ich versuche es mal so zu interpretieren:
Code:
'use strict';
document.addEventListener("DOMContentLoaded", () => {
const toggles = document.getElementsByClassName("toggle");
for(const toggle of toggles){
toggle.addEventListener('click',(event)=>{
let checkElem = event.target;
if(checkElem.checked) {
console.log('Checkbox wurde selektiert!');
} else {
console.log('Checkbox wurde nicht selektiert!');
}
});
}
});RE: Toggle logic - chunked - 29.11.2023
Danke!
das hat funktioniert. Kannst du mir erklären, wieso mein Code nicht funktioniert hat?
RE: Toggle logic - rzscout - 30.11.2023
(29.11.2023, 13:49)chunked schrieb: Danke!
das hat funktioniert. Kannst du mir erklären, wieso mein Code nicht funktioniert hat?
Ja, das kann ich. Und zwar wird das toggle-Objekt nicht mit im EventListener übernommen. Aber man kann mithilfe von event.target das Element selektieren worauf gerade der click-Event durhcgeführt wurde.
RE: Toggle logic - Sempervivum - 30.12.2023
Zitat:Und zwar wird das toggle-Objekt nicht mit im EventListener übernommen.Das trifft nicht zu, wie diese Ergänzung zeigt:
Code:
toggle.addEventListener("click", () => {
console.log(toggle);
console.log("Wurde geklickt aktuell " + toggle.checked)
// toggle.checked = (!toggle.checked)
console.log("Wurde geklickt danach " + toggle.checked)
})Der Grund, warum es bei dir nicht funktioniert ist: Eine Checkbox hat bereits per Default eine Toggle-Funktion. Fügst Du noch die eigene hinzu, wird zwei Mal getoggelt und man gelangt wieder zum Ausgangszustand: false --> true --> false
Kommentiere ich die Zeile mit dem Toggeln aus, funktioniert es wie gewünscht.