Trying to turn onclick to enter key - html

Question

I'm a beginner and I'm trying to help some special education students with a very basic budget calculator. I've seen similar questions to mine posted, but when I try those methods something always breaks and I'm having some trouble figuring it out.
Basically I need the onclick portion of the button that calls the function into action to actually respond to the enter key and not a click :-( Thank you very much in advance for any help that might be provided!!
<script>
function addTwoNumbers () {
var number1 = document.getElementById('box1').value;
var number2 = Number(document.getElementById('box2').value);
var sum = Number(number1) + number2;
document.getElementById('resultBox').value = sum;
if(sum<0) {
document.getElementById('resultBox').style.color = "red";
}
else{
document.getElementById('resultBox').style.color = "green";
}
document.getElementById('resultBox').style.visibility = 'visible';
document.getElementById('resultBox').value = sum
}
</script>
<script>
function subtractTwoNumbers () {
var number1 = document.getElementById('box1').value;
var number2 = Number(document.getElementById('box2').value);
var difference = Number(number1) - number2;
document.getElementById('resultBox').value = difference;
if(difference<0) {
document.getElementById('resultBox').style.color = "red";
}
else{
document.getElementById('resultBox').style.color = "green";
}
document.getElementById('resultBox').style.visibility = 'visible';
document.getElementById('resultBox').value = sum
}
</script>
<script>
function clearall() {
document.getElementById('box1').value = "";
document.getElementById('box2').value = "";
document.getElementById('resultBox').value = "";
}
</script>
<div id='calc' align="center"></div>
<h1>Calculator</h1>
<p>Enter budget <input type="text" id="box1"></p>
<p>Enter price   <input type="text" id="box2"></p>
<p>Press the equation key to see your results</p>
<div class="btn-group" style="width:100%">
<button style="width:33.3%" onclick="addTwoNumbers()">+</button>
<button style="width:33.3%" onclick="subtractTwoNumbers()">-</button>
<p>
<button style="width:67.5%" onclick="clearall()">clear</button>
</div>
<h3>Do you have enough?</h3>
<input type="text" id="resultBox"> <br/>

Answer 1

Instead of using the onclick attribute in the HTML, a more modern approach would be to create an event listener in your javascript.
I would give the buttons an ID. Then do something like this:
document.getElementById("clearBtn").addEventListener("click", clearAll);
There are all kinds of events you can listen for and I would guess you could find one that provides the behavior you are after.