Connecting
| 9 | var wrap = document.createElement('div'); |
| 10 | wrap.className = 'counter'; |
| 11 |
| 12 | var dec = document.createElement('button'); |
| 13 | dec.textContent = '−'; |
| 14 | dec.setAttribute('aria-label', 'Decrement'); |
| 15 |
| 16 | var out = document.createElement('output'); |
| 17 | out.textContent = '0'; |
| 18 | out.setAttribute('aria-live', 'polite'); |
| 19 |
| 20 | var inc = document.createElement('button'); |
| 21 | inc.textContent = '+'; |
| 22 | inc.setAttribute('aria-label', 'Increment'); |
| 23 |
| 24 | var reset = document.createElement('button'); |
| 25 | reset.textContent = 'Reset'; |
| 26 | reset.className = 'reset'; |
| 27 |
| 28 | function render() { out.textContent = String(count); } |
| 29 | inc.addEventListener('click', function () { count += 1; render(); }); |
| 30 | dec.addEventListener('click', function () { count -= 1; render(); }); |
| 31 | reset.addEventListener('click', function () { count = 0; render(); }); |
| 32 |
| 33 | wrap.appendChild(dec); |
| 34 | wrap.appendChild(out); |
| 35 | wrap.appendChild(inc); |
| 36 | wrap.appendChild(reset); |
| 37 | mount.replaceChildren(wrap); |
| 38 | render(); |
| 39 | })(); |