473,326 Members | 2,114 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

how to use "getElementsByClassName"?

Hi
i try to apply a fade in effect

Expand|Select|Wrap|Line Numbers
  1. var fadeEffect=function(){
  2.     return{
  3.         init:function(id, flag, target){
  4. this.elem = document.getElementById(id);
Right now, the effect applies to a div but i want to make it apply to multiple divs.Can i replace the "getElementById"
with
"getElementsByClassName" to make it work and how?
(because obviously the getElementById doesn't work for multiple tags)
Oct 1 '12 #1

✓ answered by Dormilich

no you can’t do it that simple. while getElementById() returns an HTML Element, getElementsByClassName() (like all other getElementsBy*() functions) returns a HTMLCollection (a kind of array).
you would have to loop through all elements of that collection and apply the effect individually.

3 3418
Dormilich
8,658 Expert Mod 8TB
no you can’t do it that simple. while getElementById() returns an HTML Element, getElementsByClassName() (like all other getElementsBy*() functions) returns a HTMLCollection (a kind of array).
you would have to loop through all elements of that collection and apply the effect individually.
Oct 1 '12 #2
Sherin
77 64KB
No worries if you don’t have jQuery included because we can use a function that is similar to the getElementsByClass: getElementsByClassName .

This pure JS method returns an array of all elements in the document with the specified class name, as a NodeList object. Try it in this JSFiddle.

Here’s the code and how to use it:

Expand|Select|Wrap|Line Numbers
  1. <div class="testClass">
  2.     A div with class="testClass".
  3. </div>
  4. <div class="testClass">
  5.     The second div with the same class name.
  6. </div>
  7. <p class="testClass">
  8.     A paragraph with testClass
  9. </p>
  10.  
  11. <button onclick="testFunction();">Alert the content of the first testClass</button>
  12.  
  13. <script>
  14. function testFunction() {
  15.     var x = document.getElementsByClassName("testClass");
  16.     alert(x[0].innerHTML);
  17. }
  18. </script>
Mar 20 '20 #3
gits
5,390 Expert Mod 4TB
No worries if you don’t have jQuery included because we can use a function that is similar to the getElementsByClass: getElementsByClassName .
this is trivial and was not the question in the original post. i suggest to read the real questions first before posting random answers.
Mar 20 '20 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

5
matheussousuke
by: matheussousuke | last post by:
Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails. The goal is: Make it send the email with the URL...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.