javascript getElementsByClassName更改文本字段的值

我試圖使具有某個類名稱的所有文本字段的值相互更新，我的意思是，如果您有2個類=「a」的文本字段，並且我在一個文本字段中鍵入內容，另一個將更新我輸入的內容。這是我的代碼：javascript getElementsByClassName更改文本字段的值

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script type='text/javascript'> 
     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 < x.length; i++) { 
       x[i].value = temp.value; 
      } 
     } 
    </script> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Welcome</title> 
</head> 
<body> 
    <form action=""> 
     <table style="font-weight: bold; font-size: 35px" border="10"> 
      <tr style="text-align: center"> 
       <td>Eq</td><td> = </td><td>m<td> * </td></td><td>c<td> * </td></td><td>ΔT</td> 
      </tr> 
      <tr style="text-align: center"> 
       <td><input type="number" type="number" style="max-width: 105px" id="Energyq" class="energy" /></td><td> = </td><td><input type="number" style="max-width: 105px" max="10" class="mass" id="mass1" onkeyup="classUpdate("mass",1)" onchange="classUpdate("mass",1)" /></td><td> * </td><td><input type="number" style="max-width: 105px" id="cHeat" /></td><td> * </td><td><input type="number" style="max-width: 105px" id="deltaTemprature" /></td> 
      </tr> 
      <tr> 
       <td style="text-align: center">Ek</td><td style="text-align: center"> = </td><td style="text-align: left">(m</td><td style="text-align: center">*</td><td style="text-align: right">v²)</td><td style="text-align: center"> /</td><td style="text-align: center"> 2</td> 
      </tr> 
      <tr style="text-align: center"> 
       <td><input type="number" style="max-width: 105px" id="Energyk" class="energy" /></td><td> = </td><td>(<input type="number" style="max-width: 105px" max="10" class="mass" id="mass2" h="10" onkeyup="classUpdate("mass",2)" onchange="classUpdate("mass",2)" /></td><td> * </td><td><input type="number" style="max-width: 105px" id="velocity" /><font size="6.5">²</font>)</td><td> /</td><td> 2</td> 
      </tr> 
      <tr style="text-align: center"> 
       <td>Eh</td><td> = </td><td>m</td><td> * </td><td>g</td><td> * </td><td>h</td> 
      </tr> 
      <tr style="text-align: center"> 
       <td><input type="number" style="max-width: 105px" id="Energyh" class="energy" /></td><td> = </td><td><input type="number" style="max-width: 105px" max="10" class="mass" id="mass3" onkeyup="classUpdate("mass",3)" onchange="classUpdate("mass",3)" /></td><td> * </td><td><input type="number" style="max-width: 105px" id="gravitatinalCoefficient" /></td><td> * </td><td><input type="number" style="max-width: 105px" id="height" /></td> 
      </tr> 
     <br /> 
     </table> 
     <label><input type="checkbox" id="massConservation" /> Conservation of mass</label> 
     <br /> 
     <label><input type="checkbox" id="energyConservation" /> Conservation of energy</label> 
     <br /> 
     <br /> 
     <input type="reset" /> <input type="button" onclick="run()" value="Calculate" /> 

     <h6>by X</h6> 
    </form> 
</body> 
</html>

我在做什麼錯了？

謝謝。

來源

2013-05-01 user2338361

您不能以同樣的方式處理getElementById和getElementsByClassName的返回值。其他是一個單一的項目，其他是你必須迭代的集合。

您的代碼中還存在多個其他問題。一種是使用這樣的結構：

onkeyup="classUpdate("mass",1)"

，不會因與報價問題的工作，你需要有像

onkeyup="classUpdate('mass',1)"

也，你有

 var temp = changedElem.value; 
     ... 
      x[i].value = temp.value;

這將不起作用temp是一個簡單變量，它沒有名爲value的屬性。

你真的可能想要的是

onkeyup="classUpdate('mass', this)"

然後像

function classUpdate(className, changedElem) 
    { 
     var x = document.getElementsByClassName(className); 
     var temp = changedElem.value; 
     for(var i = 0; i < x.length; i++) { 
      x[i].value = temp; 
     } 
    }

來源

2013-05-01 20:05:06 eis

我說的是classUpdate（），代碼的其他部分還沒有準備好，我在那裏迭代它。 – user2338361 2013-05-01 20:06:10

@ user2338361爲什麼不編輯問題，然後只包含您認爲已準備就緒的部分，與問題相關並且存在問題。目前還不清楚你遇到了什麼問題。 – eis 2013-05-01 20:08:07

完成............ – user2338361 2013-05-01 20:15:57

function classUpdate(className, changedId) 
{ 
    var x = document.getElementsByClassName(className); 
    var temp = x[changedId].value; 
    for(var i = 0; i < x.length; i++) { 
     x[i].value = temp.value; 
    } 
}

功能我會更新類變種，以類名，因爲「一流」是一個保留字。

來源

2013-05-01 20:09:04 Fabi

嗯......沒有改變結果......什麼也沒有發生。 – user2338361 2013-05-01 20:12:40

我很困惑你想要做什麼，但在我的瀏覽器中，我得到一個錯誤傳遞給ClassUpdate函數的參數。我將代碼更新爲單引號，並得到它以響應classUpdate（'mass'，2） – Fabi 2013-05-01 20:17:24

它確實現在做出了響應，但由於某種原因它刪除了文本（在Chrome中），並且在Firefox中文本中顯示「未定義」領域。所以它會更新它們，但不正確。 – user2338361 2013-05-01 20:41:27

javascript getElementsByClassName更改文本字段的值

回答

相關問題