title: javascript getElementsByClassName change value of text fields
body: <p>I'm trying to make the values of all the text fields with a certain class name update each other, I mean, if you have 2 text fields with class="a", and I type something in one text field, the other one will update with what I typed. This is my code:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;script type='text/javascript'&gt;
          function run()
          {
              var eq     = document.getElementById("Energyq");
              var m      = document.getElementsByClassName("mass");
              var cHeat  = document.getElementById("cHeat");
              var dT     = document.getElementById("deltaTemprature");
              var ek     = document.getElementById("Energyk");
              var v      = document.getElementById("velocity");
              var gc     = document.getElementById("gravityCoefficient")
  
          function classUpdate(class, changedId)
          {
              var x = document.getElementsByClassName(class);
              var temp = x[changedId].value;
              for(var i = 0; i &lt; x.length; i++) { 
                  x[i].value = temp.value;
              }
          }
      &lt;/script&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Welcome&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form action=""&gt;
          &lt;table style="font-weight: bold; font-size: 35px" border="10"&gt;
              &lt;tr style="text-align: center"&gt;
                  &lt;td&gt;Eq&lt;/td&gt;&lt;td&gt; = &lt;/td&gt;&lt;td&gt;m&lt;td&gt; * &lt;/td&gt;&lt;/td&gt;&lt;td&gt;c&lt;td&gt; * &lt;/td&gt;&lt;/td&gt;&lt;td&gt;ΔT&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr style="text-align: center"&gt;
                  &lt;td&gt;&lt;input type="number" type="number" style="max-width: 105px" id="Energyq" class="energy" /&gt;&lt;/td&gt;&lt;td&gt; = &lt;/td&gt;&lt;td&gt;&lt;input type="number" style="max-width: 105px"  max="10" class="mass" id="mass1" onkeyup="classUpdate("mass",1)" onchange="classUpdate("mass",1)" /&gt;&lt;/td&gt;&lt;td&gt; * &lt;/td&gt;&lt;td&gt;&lt;input type="number" style="max-width: 105px" id="cHeat"  /&gt;&lt;/td&gt;&lt;td&gt; * &lt;/td&gt;&lt;td&gt;&lt;input type="number" style="max-width: 105px" id="deltaTemprature"  /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="text-align: center"&gt;Ek&lt;/td&gt;&lt;td style="text-align: center"&gt; = &lt;/td&gt;&lt;td style="text-align: left"&gt;(m&lt;/td&gt;&lt;td style="text-align: center"&gt;*&lt;/td&gt;&lt;td style="text-align: right"&gt;v² )&lt;/td&gt;&lt;td style="text-align: center"&gt; /&lt;/td&gt;&lt;td style="text-align: center"&gt; 2&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr style="text-align: center"&gt;
                  &lt;td&gt;&lt;input type="number" style="max-width: 105px" id="Energyk" class="energy" /&gt;&lt;/td&gt;&lt;td&gt; = &lt;/td&gt;&lt;td&gt;(&lt;input type="number" style="max-width: 105px" max="10" class="mass" id="mass2" h="10" onkeyup="classUpdate("mass",2)" onchange="classUpdate("mass",2)" /&gt;&lt;/td&gt;&lt;td&gt; * &lt;/td&gt;&lt;td&gt;&lt;input type="number" style="max-width: 105px" id="velocity"  /&gt;&lt;font size="6.5"&gt;²&lt;/font&gt; )&lt;/td&gt;&lt;td&gt; /&lt;/td&gt;&lt;td&gt; 2&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr style="text-align: center"&gt;
                  &lt;td&gt;Eh&lt;/td&gt;&lt;td&gt; = &lt;/td&gt;&lt;td&gt;m&lt;/td&gt;&lt;td&gt; * &lt;/td&gt;&lt;td&gt;g&lt;/td&gt;&lt;td&gt; * &lt;/td&gt;&lt;td&gt;h&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr style="text-align: center"&gt;
                  &lt;td&gt;&lt;input type="number" style="max-width: 105px" id="Energyh" class="energy"  /&gt;&lt;/td&gt;&lt;td&gt; = &lt;/td&gt;&lt;td&gt;&lt;input type="number" style="max-width: 105px" max="10" class="mass" id="mass3"  onkeyup="classUpdate("mass",3)" onchange="classUpdate("mass",3)" /&gt;&lt;/td&gt;&lt;td&gt; * &lt;/td&gt;&lt;td&gt;&lt;input type="number" style="max-width: 105px" id="gravitatinalCoefficient"  /&gt;&lt;/td&gt;&lt;td&gt; * &lt;/td&gt;&lt;td&gt;&lt;input type="number" style="max-width: 105px" id="height"  /&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;br /&gt;
          &lt;/table&gt;
          &lt;label&gt;&lt;input type="checkbox" id="massConservation" /&gt; Conservation of mass&lt;/label&gt; 
          &lt;br /&gt;
          &lt;label&gt;&lt;input type="checkbox" id="energyConservation" /&gt; Conservation of energy&lt;/label&gt; 
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;input type="reset" /&gt; &lt;input type="button" onclick="run()" value="Calculate" /&gt;
  
          &lt;h6&gt;by X&lt;/h6&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What am I doing wrong? </p>
  
  <p>Thanks.</p>