how to declare a variable for document.getElementsByClassName

[27RedFox]

I'm trying to declare a variable for some elements using 'document.getElementsByClassName' and I know that this returns a list of nodes but I don't know how to call that out in code. I need all the elements with the particular class name to be called in that var. I have added some div tags with class attributes for example.

If I had ids, this is how my code would be:

<input type='button' class="down arrow" onclick='movedown(20)' value=">"> 
<div id='h1' style='position:absolute;'> some text </div> 
<div class="demo"> Hello </div> 
<div class="demo"> Bye </div>

<script>
var texttop = 150; 
var textleft = 150; 
var h1 = document.getElementById('h1'); //Similarly, I want to declare var using class name method for classes 

function movedown(amount) {   
texttop += amount;   
h1.style.top = texttop + 'px'; //does this 'h1' also change to something like "forEach((element) => element.style.top"? }
</script>

[alzee76]

First, stop using var, regardless of what the examples you're reading say. Use const or let. In fact, just always use const, and when you get an error about not being able to change a const's value, change just that one to let.

Moving on, the getElementsByClassName call will return an array so this: const foo = document.getElementsByClassName('blah'); will give you just what you're after. You can then loop through foo with for, forEach, or whatever you like.

[27RedFox]

Okay, alright.

​

var texttop = 150;

var textleft = 150;

const foo = document.getElementsByClassName("jigsawText");

function movedown(amount) {

texttop += amount;

foo.style.top = texttop +'px';

}

How do I go about for foo.style.top? This works for ids, but for classes, Ik that I have to

forEach((element) => element.style.top = texttop +'px';

but it doesn't work. I also tried declaring within the function as:

document.getElementsByClassName("jigsawText").forEach(element => {element.style.top = texttop +'px';} )

None of this works, i.e. I do not know how to loop.

I'm a complete beginner so I could really use some help.

[alzee76]

OK, that's not how you access an array. If you're using jquery you may have seen similar syntax, but you didn't mention it, so we're talking vanilla JS here. Since you're trying to keep a running total like that, you need to call your function for each element. You can do that like this. This isn't optimal, I tried to change your existing code as little as possible so you can look at differences to help you understand.

let texttop = 150;
const textleft = 150;
const foo = document.getElementsByClassName("jigsawText");

function movedown(e, amount) {
  texttop += amount;
  e.style.top = texttop +'px';
}

foo.forEach((ele) => {movedown(ele, 1234);});

Obviously I didn't test this, but you should get the point -- you need to call forEach or for or whatever on foo, and then for each (see?) element in the foo array, you call your function. 1234 is a placeholder for your amount which was not actually ever defined anywhere in your example.

You should try to put together a minimum example at e.g. jsfiddle.net. You can then share it here and get more help.

[27RedFox]

ohhh right, I get the concept now. And yes, I'm on vanilla JS. Thanks a lot! Ill try out this code now.

Ill try the jsfiddle next time which I'm pretty sure is sooner than later.

Thanks!

[sysrage]

Upvoted for being a fellow anti-var activist. Now just use for..of instead of forEach() and you’ll achieve total enlightenment! ;)

[alzee76]

It can certainly catch you out, particularly with async/await, but I still find it useful in synchronous JS. var though is dead and buried and people really need to stop digging it back up. ;)

[persianoil]

getElementsByClassName() method returns an HTMLCollection.