指定元素 ID 的正确 JavaScript 语法是什么？答案

【问题标题】：What is the correct javascript syntax for specifying element ID?指定元素 ID 的正确 JavaScript 语法是什么？
【发布时间】：2012-08-09 18:15:08
【问题描述】：

我有一堆来自 javascript 的用户输入要存储。我喜欢遍历一些计数器，因为它存储输入而不是一次分配一个。这是指定元素 ID 的正确语法吗？目前它对我不起作用，并抱怨例如 catMaxInput: [Exception: ReferenceError: catMaxInput is not defined]

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>

【问题讨论】：

标签： javascript html

【解决方案1】：

"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)));
}

【讨论】：

【解决方案2】：

替换：

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`)

有更好的方法，例如：

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

【讨论】：