I have one issue.
I have function add() on buttons with number parameter. So when I click button in console there error Uncaught ReferenceError: add is not defined at HTMLButtonElement.onclick
This is my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.calculator{
display: flex;
}
button:not(.big):not(.button-c) {
width: 38.5px;
height: 38px;
font-size: 16px;
padding: 5px;
border: none;
background-color: #f0f0f0;
cursor: pointer;
}
#calc-input{
height: 25px;
}
td[rowspan="2"] button {
width: 38.5px;
height: 79px;
font-size: 16px;
padding: 5px;
border: none;
background-color: #f0f0f0;
cursor: pointer;
}
td[colspan="2"] button {
height: 38px;
width: 100%;
font-size: 16px;
padding: 5px;
border: none;
background-color: #f0f0f0;
cursor: pointer;
}
.button-c{
background-color: rgb(255, 51, 0);
width: 38.5px;
height: 38px;
font-size: 16px;
padding: 5px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="calculator">
<input add="text" id="calc-input">
</div>
<table>
<tr>
<td><button class="button-c">C</button></td>
<td><button><i class="fas fa-backspace"></i></button></td>
<td><button>/</button></td>
<td><button>*</button></td>
</tr>
<tr>
<td><button onclick="add(7)">7</button></td>
<td><button onclick="add(8)">8</button></td>
<td><button onclick="add(9)">9</button></td>
<td><button>-</button></td>
</tr>
<tr>
<td><button onclick="add(4)">4</button></td>
<td><button onclick="add(5)">5</button></td>
<td><button onclick="add(6)">6</button></td>
<td><button>+</button></td>
</tr>
<tr>
<td><button onclick="add(1)">1</button></td>
<td><button onclick="add(2)">2</button></td>
<td><button onclick="add(3)">3</button></td>
<td rowspan="2"><button class="big">=</button></td>
</tr>
<tr>
<td colspan="2"><button class="big" onclick="add(0)">0</button></td>
<td><button>.</button></td>
</tr>
</table>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("Script connected correctly");
function add(num) {
console.log(num)
}
});
</script>
</body>
</html>
What I have tried:
1)Placed the tag at the bottom of the body (just before the closing tag) to make sure the HTML elements are loaded before the JavaScript is executed.
2)Checked the browser console, and confirmed that console.log(“Script connected correctly”) is printed, indicating the script is loaded.
3)Tried other solutions such as using DOMContentLoaded event, but the error persists.
What I expect: I expect that when I click a number button (e.g., 7), the type() function should be called, and the number should be appended to the input field.
Can anyone help me understand why type() is not recognized as a function, even though it’s clearly defined in the external script.js file?