ARTICLE AD BOX
You put defer on an <input>. defer only applies to <script> tags. However, it indicates confusion about load timing and should be removed. Your error "display cannot be accessed before initialization" occurs when a let/const variable is used before its declaration is evaluated in the current scope. This can happen if:
- The script executes before the DOM is parsed (like script in <head> without defer), or
- There’s another script or redeclaration that shadows display, or
- Inline onclick="appendToDisplay('…')" runs before the const display = … line has executed (e.g., due to multiple script loads or scope issues).
To prevent this class of issues, rename the variable to something unlikely to collide (like displayEl) and ensure you only query the DOM after it exists. Ideally, removes invalid attributes, avoids global inline handlers, defers all DOM work until DOMContentLoaded, renames display to displayEl . Accessing a block-scoped variable before declaration throws a ReferenceError. Inline handlers execute in global scope and can cause collisions. Delegated listeners are safer and cleaner.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>JS Project Minis</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="sec2"> <div id="calculator"> <input id="display" type="text" readonly /> <div class="keys"> <button data-input="+" class="op">+</button> <button data-input="7">7</button> <button data-input="8">8</button> <button data-input="9">9</button> <button data-input="-" class="op">-</button> <button data-input="4">4</button> <button data-input="5">5</button> <button data-input="6">6</button> <button data-input="*" class="op">*</button> <button data-input="1">1</button> <button data-input="2">2</button> <button data-input="3">3</button> <button data-input="/" class="op">/</button> <button data-input="0">0</button> <button data-input=".">.</button> <button id="equals">=</button> <button id="clear" class="op">C</button> </div> </div> </div> <script src="scripts.js"></script> </body> </html>Scripts.js
document.addEventListener("DOMContentLoaded", () => { const displayEl = document.getElementById("display"); const keysContainer = document.querySelector(".keys"); const equalsBtn = document.getElementById("equals"); const clearBtn = document.getElementById("clear"); function appendToDisplay(input) { displayEl.value += input; } function clearDisplay() { displayEl.value = ""; } function calculate() { try { const expression = displayEl.value.replace(/×/g, "*").replace(/÷/g, "/"); displayEl.value = String(eval(expression)); } catch (error) { displayEl.value = "Error"; } } keysContainer.addEventListener("click", (e) => { const btn = e.target.closest("button"); if (!btn) return; const input = btn.getAttribute("data-input"); if (input !== null) { appendToDisplay(input); } }); equalsBtn.addEventListener("click", calculate); clearBtn.addEventListener("click", clearDisplay); });