title: How can I assign an event handler to multiply text input field /change text on click?
body: <p>I have a table of input text fields.  I want to add an event handler to all of the fields so that when clicking on the cell an X fills the input value and cell.  Click again and the X value becomes an "" again. 
  I have assigned the event handlers but am having trouble setting the new value on the input field.  </p>
  
  <p>I have tried many snippets from different places on the web and can't get the value to change in the table cell(input text field).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var inputs = document.getElementsByTagName("input");
  
  for (var i = 0; i &lt; inputs.length; i++) {
    if (inputs[i].getAttribute('type') == 'text') {
      inputs[i].addEventListener('click', changeValue);
    }
  }
  
  function changeValue(el) {
    var el = this;
    var v = el.value;
  
    if (v === "") {
      v = 'X';
      console.log(v);
    } else if (v === 'X') {
      v = "";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th scope="col"&gt;type&lt;/th&gt;
        &lt;th scope="col"&gt;1/4&lt;/th&gt;
        &lt;th scope="col"&gt;3/8&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr class="list_group"&gt;
        &lt;td class="cell1" data-label="type"&gt;
          &lt;input aria-label="type" type="text" name="input_1[]" value="Fir"&gt;&lt;/td&gt;
        &lt;td class="cell2" data-label="1/4"&gt;
          &lt;input aria-label="1/4" type="text" name="input_1[]" value=""&gt;&lt;/td&gt;
        &lt;td class="cell3" data-label="3/8"&gt;
          &lt;input aria-label="3/8" type="text" name="input_1[]" value=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="list_group"&gt;
        &lt;td class="cell1" data-label="type"&gt;
          &lt;input aria-label="type" type="text" name="input_1[]" value="SYP"&gt;&lt;/td&gt;
        &lt;td class="cell2" data-label="1/4"&gt;
          &lt;input aria-label="1/4" type="text" name="input_1[]" value=""&gt;&lt;/td&gt;
        &lt;td class="cell3" data-label="3/8"&gt;
          &lt;input aria-label="3/8" type="text" name="input_1[]" value=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="list_group"&gt;
        &lt;td class="cell1" data-label="type"&gt;
          &lt;input aria-label="type" type="text" name="input_1[]" value="Marine"&gt;&lt;/td&gt;
        &lt;td class="cell2" data-label="1/4"&gt;
          &lt;input aria-label="1/4" type="text" name="input_1[]" value=""&gt;&lt;/td&gt;
        &lt;td class="cell3" data-label="3/8"&gt;
          &lt;input aria-label="3/8" type="text" name="input_1[]" value=""&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The premise is to present a large chart that a user can check the product they have or are interested in from the chart</p>