ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-08-19 11:41:58 +02:00
parent c6d9611e81
commit ae9b04f27f
111 changed files with 3878 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
06_js-debug/uebungen/u14_counter-error/index.html
View File

@@ -8,15 +8,17 @@
</head>
<body>
<div class="container py-5">
<h1>Counter</h1>
<div class="counter">
<h1>Counter</h1>
<div class="row mt-4">
<div class="col col-12 col-sm-10 col-lg-6">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">Count:</span>
<input type="text" id="count" class="form-control" value="0" readonly />
<div class="row mt-4">
<div class="col col-12 col-sm-10 col-lg-6">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">Count:</span>
<input type="text" id="count" class="form-control input-count" value="0" readonly aria-label="Counter" />
</div>
<button id="incrementButton" class="btn btn-primary w-100">Increment</button>
</div>
<button id="incrementButton" class="btn btn-primary w-100">Increment</button>
</div>
</div>
</div>
@@ -38,8 +40,8 @@
// ===== EVENT HANDLER =====
function onClickIncrement() {
let count = counter.count;
count++;
let count = ++counter.count;
// count++;
countEl.value = counter.count;
}

31
06_js-debug/uebungen/u14_counter-error/solution.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
@@ -25,18 +25,33 @@
'use strict';
(() => {
// === DOM & VARS =======
const DOM = {};
// ===== DOM & VARS =====
const countEl = document.querySelector('#count');
const btnEl = document.querySelector('#incrementButton');
// === INIT =============
const init = () => {};
let counter = { count: 0 };
// === EVENTHANDLER =====
// ===== INIT =====
const init = () => {
btnEl.addEventListener('click', onClickIncrement);
};
// === XHR/FETCH ========
// ===== EVENT HANDLER =====
function onClickIncrement() {
// variante 1
// let count = counter.count;
// count++;
// counter = { count: count };
// === FUNCTIONS ========
// Variante 2
// counter = { count: ++counter.count }; // hier ist der präfix-inkrement wichtig - der post-inkrement würde ins "leere" gehen, da er erst zugewiesen wird und dann erhöht und diese somit verloren ginge
// Variante 3 - direkt counter.count erhöhren
counter.count++;
countEl.value = counter.count;
}
// ===== CALL INIT =====
init();
})();
</script>