title: Span isn't updated when I delete the contents of my input field
body: <p>I want to link a <code>&lt;span&gt;</code> element's content to the value of an input field, but it stops working after it runs the first time.</p>
  
  <p>I want to automatically validate the contents of the input field before I send it to the server.</p>
  
  <pre class="lang-js prettyprint-override"><code>function valid() {
    var username = document.getElementById('name').value;
    var refusesymbol = ['&lt;', '&gt;', '@', '.', ',', '\"', '\'', '\?', '\\', '\/', '\*', '\+', '\-', '\-', '\_', '(', ')', '{', '}', '$', '#', '!', '^', '&amp;', '|', '~', , '\;'];
  
    for (var i = 0; i &lt; refusesymbol.length; i++) {
      if (username.includes(refusesymbol[i])) {
        document.getElementById('sname').innerHTML = "invalid";
        return false;
      } else {
        document.getElementById('sname').innerHRTML = "valid";
      }
  
    }
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form method="POST" action="regist.php" enctype="multipart/form-data" class="form"&gt;
    &lt;label&gt;USER NAME&lt;/label&gt;&lt;br /&gt;
    &lt;input type="text" name="name" id="name" autocomplete="off" onkeyup="valid()" /&gt;&lt;br /&gt;
    &lt;span id="sname" style="color: red;"&gt;&lt;/span&gt;&lt;br /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This works once, but after that the value of span becomes fixed and no longer updates.</p>