25.11.2023, 16:09
Hallo,
ich habe Probleme nachzuvollziehen, wieso meine Toggle Logik nicht wie erwartet funktioniert:
hier mein Skript:
hier ist die HTML die ich nutze. Die CSS Dateien habe ich beim Testsen auch mal komplett raus gemacht. Tatsächlich konnte ich aber auch nichts finden was toggle.checked irgendwie verändert:
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.
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.
danke schonmal für die Hife.