Restore textfield's default value when user clicks the reset button JavaScript

Question

I'm trying to get the textfields to return to their default value when the user clicks the Reset button.

All it does now when the user clicks the Reset button is replacing the user's text with ''.

How can I do it by using pure JavaScript (no jQuery)?

HTML:

<p>Type the first number</p>
<input id="first" type="text" placeholder="First Number" />
<p>Type the second number</p>
<input id="second" type="text" placeholder="Second Number" />
<button id="aButton">Apply</button>
<button id="rButton">Reset</button>
<div id="add"></div>

JAVASCRIPT:

app.onactivated = function (args) {
        var aButton = document.getElementById("aButton");
        aButton.addEventListener("click", buttonClickHandler, false);

        var rButton = document.getElementById("rButton");
        rButton.addEventListener("click", buttonResetHandler, false);

    };

...

function buttonResetHandler(evetInfo) {

        document.getElementById("first").innerText = '';
        document.getElementById("second").innerText = '';

    }

Answer 1

innerText is an invalid property that is implemented in IE browsers and is used for setting/getting text content of non-form elements, if the values should be set as default, you can use defaultValue property:

var a = document.getElementById("first"),
    b = document.getElementById("second");
a.value = a.defaultValue;
b.value = b.defaultValue;

If you want to reset all the form elements, you can use .reset() method of DOM HTMLFormElement object:

document.forms["myForm"].reset();