I want to write a simple calculator. However, nothing happens when i click the clear button. I can't understand why this button isn't working, because the function clear() and the function addNumber are almost the same. Here is the HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
</head>
<body>
<h1>A simple calculator</h1>
<span id="num">0</span>
<hr></hr>
<button onclick = "symbole('+')">+</button>
<button onclick="symbole('-')">-</button>
<button onclick="symbole('*')">*</button>
<button onclick="symbole('/')">/</button>
<p></p>
<button onclick="addNumber(1)">1</button>
<button onclick="addNumber(2)">2</button>
<button onclick="addNumber(3)">3</button>
<p></p>
<button onclick="addNumber(4)">4</button>
<button onclick="addNumber(5)">5</button>
<button onclick="addNumber(6)">6</button>
<p></p>
<button onclick="addNumber(7)">7</button>
<button onclick="addNumber(8)">8</button>
<button onclick="addNumber(9)">9</button>
<p></p>
<button onclick="addNumber(0)">0</button>
<p></p>
<button onclick="calculate()">calculate</button>
<button onclick="backspace()">backspace</button>
<button onclick="clear()">clear</button>
<script src="index.js"></script>
</body>
</html>
Here is my JS code.
let num = document.getElementById('num');
let st = undefined;
function addNumber(n){
if (num.innerText==='0'){
num.innerText = '';
}
num.innerText += n;
}
function symbole(s){
num.innerText += s;
st = s;
}
function backspace(){
num.innerText = num.innerText.split(0,-2);
}
function calculate(){
let a = 0;
}
function clear(){
num.innerText = '';
}
Please just ignore calculate(). Can somebody please explain this for me? Thanks! Btw, the backspace button is not working as well.