How to add multiple elements to getElementsByClassName

Question

Here is my code so far, I have got it working with a getElementById but am having trouble getting to have multiple elements added to it.
Any help is much appreciated.

https://code.sololearn.com/WeHf65idj0VK/#html

Answer 1

function pos(dx, dy){
if (!document.getElementById) return;
if ((x == 10 && dx == -1) ||
(x == 290 && dx == 1))
alert("can't move");
else
x += 5 * dx;
if ((y == 10 && dy == -1) ||
(y == 270 && dy == 1))
alert("can't move");
else
y += 5 * dy;
Added ifs to stop moving at edges. You could reset x & y instead.

Answer 2

I've posted a useful explanation of how handle elements array-like returned by such functions (and suggested to use another one) in one of your previous question about the same subject, but you seems to not read it, and/or not getting so much attention to it, so I don't know why I would help you further ^^

https://www.sololearn.com/Discuss/1071147/?ref=app

Answer 3

Im looking so that when you touch the borders it will restart the square at the starting position. @John Wells

Answer 4

I don't know if i am correct but

getElementsByClassName returns an array so you can loop through it.

Or

The best way do it using jquery

Answer 5

@visph I obviously read it dumb ass but I tried what they said to try with no luck so I tried again this time with posting my code so just chill out

Answer 6

What exactly are you looking for?

Meanwhile, your hide and show after running game would be simpler to use class for the items.
<div id = "left_div" class=toggleMe></div>
<div id = "right_div" class=toggleMe></div>

$(".toggleMe").hide();
$(".toggleMe").show(3000);

Of course, every id that was listed in the hide/show needs the class name added.

Answer 7

getElementsByClassName will return an array. if you want to access an element of the array you need to use a number as an index: element[0], element[1], ... like this.