如何清除表格中的信息？

Question

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?

Answer 1

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 = ""; }

Answer 2

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.