The addEventListener calls are missing/commented out in app.js. Handler functions exist but are never connected to buttons.
const uploadBtn = document.getElementById('upload-btn');
const grayscaleBtn = document.getElementById('grayscale-btn');
const canvas = document.getElementById('canvas');
console.log(uploadBtn); // The actual button element
console.log(uploadBtn.textContent); // "Upload"
uploadBtn.addEventListener('click', function() {
console.log("Upload button clicked!");
});
grayscaleBtn.addEventListener('click', function() {
console.log("Grayscale button clicked!");
});
Wire ALL toolbar buttons to their respective handlers.
const brightnessSlider = document.getElementById('brightness');
const brightnessValue = document.getElementById('brightness-value');
brightnessSlider.addEventListener('input', function(event) {
brightnessValue.textContent = event.target.value;
});
The 'input' event fires continuously as the slider moves. The 'change' event only fires when you release. We want real-time feedback → use 'input'.
Change a button's text when clicked:
uploadBtn.addEventListener('click', function() {
uploadBtn.textContent = "Uploading...";
// ... do upload ...
uploadBtn.textContent = "Upload";
});
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.key === 'z') {
event.preventDefault();
console.log("Undo!");
}
});
event.preventDefault() stops the browser's default action (e.g., Ctrl+Z normally triggers the browser's undo, not yours).
git switch -c bugfix/PIXELCRAFT-008-wire-events
git add src/scripts/app.js
git commit -m "Wire button events and fix upload validation (PIXELCRAFT-008)"
git push origin bugfix/PIXELCRAFT-008-wire-events
# PR → Review → Merge → Close ticket ✅
Event-driven programming.
Instead of running top-to-bottom and finishing, the program sets up listeners and waits. When something happens (click, keypress, network response), the registered handler runs.