Hi, I created a random maths generator and it works for everything except when it should be adding. What am I doing wrong?

See code below:

```
<body>
<div>
<h1>Let's do some randon maths! 🤪</h1>
<h3>
Select two numbers between 0-50 and then push the button below for some
random maths.
</h3>
<input type="number" id="value1" />
<p id="math">❓</p>
<input type="number" id="value2" />
<p id="total">=</p>
<button>Random maths!</button>
</div>
<script>
function randomMath() {
let a = document.getElementById("value1").value;
let b = document.getElementById("value2").value;
let math = Math.floor(Math.random() * 4);
let calculate;
let maths = document.getElementById("math").textContent;
let total = document.getElementById("total").textContent;
if (math === 0) {
calculate = a * b;
document.getElementById("math").innerHTML = "✖️";
document.getElementById("total").innerHTML = `= ${calculate}`;
} else if (math === 1) {
calculate = a / b;
document.getElementById("math").innerHTML = "➗";
document.getElementById("total").innerHTML = `= ${calculate}`;
} else if (math === 2) {
calculate = a + b;
document.getElementById("math").innerHTML = "➕";
document.getElementById("total").innerHTML = `= ${calculate}`;
} else if (math === 3) {
calculate = a - b;
document.getElementById("math").innerHTML = "➖";
document.getElementById("total").innerHTML = `= ${calculate}`;
}
}
let random = document.querySelector("button");
random.addEventListener("click", randomMath);
</script>
</body>
</html>
```