title: How to define textfield and radio button listeners in JavaScript
body: <p>So for a class project I have to make this simple calculator, which was very easy to do. However, I'm required to define my event listeners in JavaScript instead of using something like:
      onclick="compute()"</p>
  
  <p>But I need the result of my calculator to update whenever I change a value in my field or select any of the radio buttons. How can I do this? The code I have now is not working.</p>
  
  <pre><code>&lt;script&gt;
  function compute(){
      var functionSelected = document.getElementsByName("function");
      var valueOne = Number(document.getElementById("fielda").value);
      var valueTwo = Number(document.getElementById("fieldb").value);
      var ans = 0;
      if(functionSelected[0].checked){
          ans = (valueOne+valueTwo);
      }
      if(functionSelected[1].checked){
          ans = (valueOne-valueTwo);
      }
      if(functionSelected[2].checked){
          ans = (valueOne*valueTwo);
      }
      if(functionSelected[3].checked){
          ans = (valueOne/valueTwo);
      }
      if(ans&gt;=9007199254740992){
          document.getElementById("solution").textContent = "ERROR NUMBER TO LARGE TO BE COMPUTED";
      }
      else{
          document.getElementById("solution").textContent = "Equals: " + ans;
      }
  }
  
  document.getElementById("fielda").addEventListener("change", compute(), false);
  document.getElementById("fieldb").addEventListener("change", compute(), false);
  document.getElementByName("function").onclick = compute();
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;
      &lt;input type="number" id="fielda"/&gt;&lt;br /&gt;
      &lt;input type="number" id="fieldb"/&gt;&lt;br /&gt;
      &lt;label&gt;&lt;input name="function" type="radio" value="add"/&gt; Add&lt;/label&gt;&lt;br /&gt;
      &lt;label&gt;&lt;input name="function" type="radio" value="subtract"/&gt; Subtract&lt;/label&gt;&lt;br /&gt;
      &lt;label&gt;&lt;input name="function" type="radio" value="multiply"/&gt; Multiply&lt;/label&gt;&lt;br /&gt;
      &lt;label&gt;&lt;input name="function" type="radio" value="divide"/&gt; Divide&lt;/label&gt;&lt;br /&gt;
      &lt;/p&gt;
      &lt;p&gt;
      &lt;output id="solution"&gt;Solution Will Appear Here&lt;/output&gt;
      &lt;/p&gt;
  &lt;/body&gt;
  </code></pre>