Get HTML element via string

Question

I want to grab an HTML element using a variable which contains a string which is also the name of my HTML element. When calling the variable containing the string I don´t want to get the string itself but the ID of the HTML element which has the same name. How can I do that?

In particular, I want to do this:

I´ve got some objects:

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

In the script I make a string which equals the ID:

var aktuellerCanvas;
var count = -1;

Later, I want to grab the elements by ID, first "output_1", then "output_2" and so on.... I tried this, but I was not successful. I guess, I´m only calling the string in the variable aktuellerCanvas.

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

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

Can you help me?

count % 3 ++ is not legal. You probably meant ++count % 3. — Jon
– Jon, Commented Jun 28, 2013 at 9:02
as count is incremented before I don't think it is required at all — Arun P Johny
– Arun P Johny, Commented Jun 28, 2013 at 9:03

Arun P Johny · Accepted Answer · 2013-06-28 09:00:59Z

1

You can use document.getElementById() here because, it you have the id of the element as the string

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

answered Jun 28, 2013 at 9:00

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Clyde Lobo · Accepted Answer · 2013-06-28 09:02:10Z

1

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

Also (count % 3 ++) is not valid

You may need (count++ % 3 ) or (++count % 3)

answered Jun 28, 2013 at 9:02

Clyde Lobo

9,1747 gold badges37 silver badges63 bronze badges

Comments

Ja͢ck · Accepted Answer · 2013-06-28 09:07:24Z

0

If the ids are in the range of [1, 3] the code to return the element identifier name should be this:

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

Assuming you start with count == -1, the above statement will return output_1 the first time you call it, output_2 for the second time and output_3 for the third; and then it repeats.

Afterwards you get the actual element using getElementById():

aktuellerCanvas = document.getElementById(aktuellerCanvasId);

answered Jun 28, 2013 at 9:07

Ja͢ck

174k39 gold badges269 silver badges316 bronze badges

Comments

Clyde Lobo · Accepted Answer · 2013-06-28 09:36:09Z

0

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

will do the job !

But caution, you cannot apply "putImageData" directly on the HTML element, you have to apply it on its 2D context ! See the code below:

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

edited Jun 28, 2013 at 9:36

Clyde Lobo

9,1747 gold badges37 silver badges63 bronze badges

answered Jun 28, 2013 at 9:01

Ricola3D

2,46218 silver badges16 bronze badges

1 Comment

Ricola3D Over a year ago

The W3School doc about "PutImageData": w3schools.com/tags/canvas_putimagedata.asp

Collectives™ on Stack Overflow

Get HTML element via string

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related