Clear text inputs in JavaScript

Question

I am taking an online course called JavaScript Tutorial. About 1 hr 2 min in, we are wrapping up the Events section of the course. The last event is to clear any text input. I looked at the instructor's code in the video as closely as I could, and just can't see why my text does not clear. Below are the events and the HTML tags they reference. The last event called clearInputs is what I am trying to get to clear the text in my input fields. The instructor makes it seem like it is supposed to clear mouse and key inputs.

<!doctype html>
<html lan="en">
    <head>
        <meta charset="utf-8">
        <script src="jstut.js"></script>

        <style type="text/css">
          body {font-size: 1.6em;}
          .hidden {display:none;}
          .show {display:inLine !important;}
          button {
            border: 2px solid black; background: #ESE4E2;
            font-size: .5em; font-weight: bold; color: black;
            padding: .8em 2em;
            margin-top: .4em;
          }
        </style>

    </head>
    <body>

        <input type="text" id="randInput"
        onChange="var dataEntered=document.getElementById('randInput').value;
        alert('User Typed ' + dataEntered)"

        <form action="#" id="sampForm">
            <input id='charInput' type="text">

            <p id="keyData">Key Data Here</p>

            <input type="submit" value="Submit">
            <input type="reset" value="Reset">

        </form><br />

        <img src="ntt-logo.png" id="logo">

        <button id="logoButton" type='text'>Get Logo</button>

        <input id='mouseInput' type='text' size="30"><br />

        <button id="clearInputs">Clear Inputs</button>

        <script>

        // event.which returns the key or mouse button clicked

        function getChar(event){
            if(event.which == null){
                return String.fromCharCode(event.keyCode); // for Internet Explorer
            } else if (event.which != 0 && event.charCode != 0){
                return String.fromCharCode(event.which); // for all other browsers
            } else {
                return null; // if user uses a key code that cannot be displayed on the screen
            }
        }

        document.getElementById('charInput').onkeypress = 
          function(event){
            var char = getChar(event || window.event)
            if(!char) return false; // us user clicked something that doesn't work

            // use innerHTML for html tag element id
            // use value for input element 

            document.getElementById('keyData').innerHTML = char + " was clicked";
            return true;
          }

          // .onfocus is when a field was clicked
          document.getElementById('charInput').onfocus = function(event){
            document.getElementById('keyData').innerHTML = "Input Gained Focus";
          }

          document.getElementById('charInput').onselect = function(event){
            document.getElementById('keyData').innerHTML = "Text Selected";
          }

          document.getElementById('logoButton').onclick = function(event){
            document.getElementById('logo').className = "show";
          }

          document.getElementById('logo').onclick = function(event){
            document.getElementById('logo').className = "hidden";
          }       

          document.getElementById('logo').onmouseover = function(event){
            document.getElementById('logo').src = "ntt-logo-horz.png";
          document.getElementById('mouseInput').value = "Mouse Over Image";
          }

          document.getElementById('logo').onmouseout = function(event){
            document.getElementById('logo').src = "ntt-logo.png";
          document.getElementById('mouseInput').value = "Back to Original Image";
          }

          document.getElementById('clearInputs').onclick = function(event){
            var inputElements = document.getElementsByTagName('input');

            for(var i = 0; i < inputElements.length; i++){
                if(inputElements[i].type == "text"){
                    inputElements[i].value == "";
                }
            }
          }
        </script>
    </body>
</html>

Please help me clear my inputs. Thank you!

It only clears text inputs, because it has if(inputElements[i].type == "text") — Barmar
– Barmar, Commented Sep 29, 2016 at 0:50
inputElements[i].value == ""; You are not setting the value because you have == — epascarello
– epascarello, Commented Sep 29, 2016 at 0:53
@Barmar Thank you very much! I re-watched that part of the video, and sure enough, I missed that single =. Thank you again! — host_255
– host_255, Commented Sep 29, 2016 at 1:01

BrTkCa · Accepted Answer · 2016-09-29 01:05:48Z

2

You can iterate the inputs and set value as empty, like this:

document.getElementById('clearInputs').onclick = function(event){
  var inputs = document.getElementsByTagName('input');
  for (var i=0 ; i < inputs.length ; i++){
    if (inputs[i].type == "text"){
        inputs[i].value = "";
      }
  }
}

<input type="text"/>
<br/>
<input type="text"/>
<br/>
<button id="clearInputs">Clear</button>

edited Sep 29, 2016 at 1:05

answered Sep 29, 2016 at 1:01

BrTkCa

4,7894 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Barmar Over a year ago

There's no such thing as </input>.

host_255 Over a year ago

@Barmar made a comment about changing the == "" to = "", which helped without having to remove the if statement. I tried your method and it also works quite well. Thank you @LucasCosta

Collectives™ on Stack Overflow

Clear text inputs in JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related