Question

我想使用包含字符串的变量来获取HTML元素，该字符串也是我的HTML元素的名称。当调用包含字符串的变量时，我不想获取字符串本身，而是获取具有相同名称的HTML元素的ID。我怎么能这样做？

特别是，我想这样做：

我有一些对象：

<canvas width="250" height="250" id="output_1"></canvas>
<canvas width="250" height="250" id="output_2"></canvas>
<canvas width="250" height="250" id="output_3"></canvas>

在脚本中我创建一个等于ID的字符串：

var aktuellerCanvas;
var count = -1;

稍后，我想按ID获取元素，首先是“output_1”，然后是“output_2”等等.... 我试过这个，但我没有成功。我想，我只是在变量aktuellerCanvas中调用字符串。

count++;
aktuellerCanvas = "output_" + (count % 3 ++);

aktuellerCanvas.putImageData(image, 0, 0, 0, 0, width, height);

你能帮助我吗？

Answer 1

你可以在这里使用document.getElementById()，因为你将元素的id作为字符串

aktuellerCanvas = document.getElementById("output_" + (count % 3))

Answer 2

aktuellerCanvas = document.getElementById("output_" + (count % 3 ++))

另外 (count % 3 ++)无效

您可能需要(count++ % 3 )或(++count % 3)

Answer 3

aktuellerCanvas = document.getElementById("output_" + (count++ % 3));

将完成这项工作！

但请注意，您不能直接在HTML元素上应用“putImageData”，您必须在其2D上下文中应用它！请参阅以下代码：

var ctx = aktuellerCanvas.getContext("2d");
ctx.putImageData(image, 0, 0, 0, 0, width, height);

Answer 4

如果id在[1, 3]范围内，则返回元素标识符名称的代码应为：

aktuellerCanvasId = "output_" + (++count % 3 + 1);

假设您从count == -1开始，上述语句将在您第一次调用时返回output_1，第二次返回output_2，第三次返回output_3;然后它重复。

然后使用getElementById()获得实际元素：

aktuellerCanvas = document.getElementById(aktuellerCanvasId);

通过字符串获取HTML元素

4 个答案: