He Guys, I tried couple of times to reset my input field with Vanilla javaScript with no success...I tried the reset() method but, perhaps I didn't add the code right...Here is my code.

   <div class="container">
    <h1>Enter a Number<br />
        from 1 to 100.
    </h1>
    <input type="input" id="inputBox">
    <input type="button" id="button" value="submit" onclick="myFunction()">
    <span id="box1"></span>
   </div>

and js

    function myFunction() {
var i = document.getElementById("inputBox").value;

        //for (var i = 1; i < 100; i++) {

if (i % 3 === 0 && i % 5 === 0) {

    document.getElementById("box1").innerHTML = "fizzbuzz";

} else if (i % 3 === 0) {

    document.getElementById("box1").innerHTML = "fizz";

}   else if (i % 5 === 0) {

    document.getElementById("box1").innerHTML = "buzz";

} else {

    document.getElementById("box1").innerHTML = i;
}


}

I also have a pen here:

Thanks!

He Guys, I tried couple of times to reset my input field with Vanilla javaScript with no success...I tried the reset() method but, perhaps I didn't add the code right...Here is my code.

   <div class="container">
    <h1>Enter a Number<br />
        from 1 to 100.
    </h1>
    <input type="input" id="inputBox">
    <input type="button" id="button" value="submit" onclick="myFunction()">
    <span id="box1"></span>
   </div>

and js

    function myFunction() {
var i = document.getElementById("inputBox").value;

        //for (var i = 1; i < 100; i++) {

if (i % 3 === 0 && i % 5 === 0) {

    document.getElementById("box1").innerHTML = "fizzbuzz";

} else if (i % 3 === 0) {

    document.getElementById("box1").innerHTML = "fizz";

}   else if (i % 5 === 0) {

    document.getElementById("box1").innerHTML = "buzz";

} else {

    document.getElementById("box1").innerHTML = i;
}


}

I also have a pen here: http://codepen.io/lucky500/pen/GJjVEO

Thanks!

• javascript

2 Answers 2

just set the value of the input document.getElementById("inputBox").value = ""

    function myFunction() {
      var input = document.getElementById("inputBox");
      var i = input.value;

      //for (var i = 1; i < 100; i++) {

      if (i % 3 === 0 && i % 5 === 0) {

        document.getElementById("box1").innerHTML = "fizzbuzz";

      } else if (i % 3 === 0) {

        document.getElementById("box1").innerHTML = "fizz";

      } else if (i % 5 === 0) {

        document.getElementById("box1").innerHTML = "buzz";

      } else {

        document.getElementById("box1").innerHTML = i;
      }

      // clear input

      input.value = "";

    }

<div class="container">
  <h1>Enter a Number<br />
        from 1 to 100.
    </h1>
  <input type="input" id="inputBox">
  <input type="button" id="button" value="submit" onclick="myFunction()">
  <span id="box1"></span>
</div>

// Clear all form fields
var form = document.getElementById('theForm');
form.reset();

// Reset the value of a specific field
var field = document.getElementById('theFormField');
field.value = '';