指定元素ID的正確javascript語法是什麼？

Question

我有一堆用戶輸入來從一個JavaScript存儲。我喜歡循環訪問某個計數器，因爲它存儲輸入，而不是一次分配一個。這是指定元素ID的正確語法嗎？這不是在這一點上爲我工作，並抱怨例如catMaxInput：[異常：的ReferenceError：catMaxInput沒有定義]

var catInput = [], catMaxInput = [], catCostSFHR = [], catOccHRStart=[], catOccHREnd =[]; 
     var z = 1; 
     for (var i=0; i<3; i++){ 
      catMaxInput[i] = (Math.round(parseFloat(document.getElementById("cat\"" + z + "\"Max").value))); 
      z++; 
     } 

     for (var c=0; c<3; c++){ 
      catTotalArea[c] = (Math.round(parseFloat(document.getElementById("cat\"" + z + "\"TotalArea").value))); 
      z++; 
     } 

到目前爲止，這是形式：

<tr> 
      <td>CAT 1</td> 
      <td><input name="data1Max4" type="text" id="cat1Max" value="20" /></td> 
      <td><input name="data1Max7" type="text" id="cat1TotalArea" value="50,000 SF" /></td> 
      <td><input name="data1Max10" type="text" id="cat1CostSFHR" value="$ 100.00" /></td> 
      <td><input name="data1Max13" type="text" id="cat1OccHRStart" value="6:00am" /></td> 
      <td><input name="data1Max16" type="text" id="cat1OccHREnd" value="12:00pm" /></td> 
     </tr> 
     <tr> 
      <td>CAT B</td> 
      <td><input name="data2Max5" type="text" id="cat2Max" value="70" /></td> 
      <td><input name="data2Max8" type="text" id="cat2TotalArea" value="20,000 SF" /></td> 
      <td><input name="data2Max11" type="text" id="cat2CostSFHR" value="$ 50.00" /></td> 
      <td><input name="data2Max14" type="text" id="cat2OccHRStart" value="12:00pm" /></td> 
      <td><input name="data2Max17" type="text" id="cat2OccHREnd" value="8:00pm" /></td> 
     </tr> 
     <tr> 
      <td>CAT C</td> 
      <td><input name="data3Max6" type="text" id="cat3Max" value="100" /></td> 
      <td><input name="data3Max9" type="text" id="cat3TotalArea" value="30,000 SF" /></td> 
      <td><input name="data3Max12" type="text" id="cat3CostSFHR" value="$ 0.00" /></td> 
      <td><input name="data3Max15" type="text" id="cat3OccHRStart" value="8:00pm" /></td> 
      <td><input name="data3Max18" type="text" id="cat3OccHREnd" value="6:00am" /></td> 
     </tr> 

Answer 1

替換：

getElementById("cat\"" + i +"\"Max") 
getElementById("cat\"" + c+ "\"TotalArea") 

有：

getElementById("cat"+i+"Max") 
getElementById("cat"+c+"TotalArea") 

更新：在ES6你可以這樣做：

getElementById(`cat${i}Max`) 
getElementById(`cat${c}TotalArea`) 

有這樣做LIK的更好的方法e：

How do I iterate through table rows and cells in javascript?

Answer 2

的"cat\"" + i +"\"Max"結果在"之間具有值i的字符串。

你可能需要這是"cat" + i +"Max"。

您正在轉義並在您不需要的地方添加雙引號。

var catInput = [], catMaxInput = [], catCostSFHR = [], 
              catOccHRStart=[], catOccHREnd =[]; 

for (var i=0; i<3; i++){ 
    catMaxInput[i] = (Math.round(parseFloat(
          document.getElementById("cat" + i +"Max").value))); 
} 

for (var c=0; c<3; c++){ 
    catTotalArea[c] = (Math.round(parseFloat(
         document.getElementById("cat" + c+ "TotalArea").value))); 
}