1

I am doing my first javascript app (some kind of calculator, where you write 2 numbers and you can add them, substract them, multiply them and divide them) i want to make a button that lets you clear the numbers you typed, i have searched on the web but i can't find exactly how to do it; my code is this:

function addBy() {
  num1 = document.getElementById("firstNumber").value;
  num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = +num1 + +num2;
}

function substractBy() {
  num1 = document.getElementById("firstNumber").value;
  num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = +num1 - +num2;
}

function multiplyBy() {
  num1 = document.getElementById("firstNumber").value;
  num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = num1 * num2;
}

function divideBy() {
  num1 = document.getElementById("firstNumber").value;
  num2 = document.getElementById("secondNumber").value;
  document.getElementById("result").innerHTML = num1 / num2;
}

function clear() {
  document.getElementById("result").innerHTML = "";
}
<form>
  1st Number : <input type="number" id="firstNumber" /><br> 
  2nd Number: <input type="number" id="secondNumber" /><br>
  <input type="button" onClick="addBy()" value="Add" /><br>
  <input type="button" onClick="substractBy()" value="Substract" /><br>
  <input type="button" onClick="multiplyBy()" Value="Multiply" /><br>
  <input type="button" onClick="divideBy()" Value="Divide" /><br>
  <input type="button" onClick="clear()" value="Clear" /><br>
</form>

can anyone help?

DBS
  • 9,110
  • 4
  • 35
  • 53
donv13
  • 11
  • 3
  • 1
    Are you asking how to set the text of an input element to an empty string? – Dave Newton Sep 02 '22 at 15:59
  • I mean how do i like clear the operations, like a real calculator with the C or AC. Thank you for responding – donv13 Sep 02 '22 at 16:01
  • I've turned your code into a functional snippet, but you seem to have left out the `#result` element. Could you edit that in so we can see the code in action? – DBS Sep 02 '22 at 16:07
  • @donv13 You'd set the input elements to an empty string and zero out the numeric variables. – Dave Newton Sep 02 '22 at 16:13
  • function name `clear` is messing things up. Can you please try changing it to something like `clean` and try again? `document.clear` is interfering with your function. https://stackoverflow.com/questions/7165570/is-clear-a-reserved-word-in-javascript – Helio Sep 02 '22 at 16:16

2 Answers2

2

Because it seems like your aim is to have calculator-like functionality here, your clear() function just needs to clear the inputs on the page, as well as the result.

Similar to how you are getting the values for firstNumber and secondNumber, you can also set those values to an empty string.

function clear() {
  document.querySelector("#firstNumber").value = "";
  document.querySelector("#secondNumber").value = "";
  document.querySelector("#result").innerHTML = "";
}
Sup3rkirby
  • 155
  • 1
  • 9
  • Thank you, it works, just had to tweak a couple of things – donv13 Sep 02 '22 at 16:36
  • @donv13 on the left of the answer you can upvote or as the asker of the question you can mark the answer as accepted with the checkmark under the arrows! – JDawwgy Sep 02 '22 at 16:46
0

If you want to clear only inputs

Input Type Reset can do that, Just add

<input type="reset" value="Clear"/>

Or

<button type="reset">Clear</button>

At your form and then whenever anyone clicks it, it will clear all the inputs taken from the user.

JavaScript Approach as a Function

function clear() {
   document.getElementById('#form-id').reset();
}

If you want to clear inputs and the result

Javascript Function

function clear() { 
   document.getElementById('#firstNumber').value = ''; 
   document.getElementById('#secondNumber').value = ''; 
   document.getElementById('#result').innerHTML = '';
}

I hope it will work.