Get element by class?

**supercain** · 02-14-2013 03:56 AM

Hi,

im using this code right now

Code:

<script type="text/javascript">
    function retract() {
  		document.getElementById("ret-banner").id = 'exp-banner';
  	}
  	function expand() {
  		document.getElementById("exp-banner").id = 'ret-banner';
  		setTimeout('retract()', 3000)
  	}
 </script>

but i need it to get the element by class instead. I tried just by changing it to document.getElementByClassName but it didnt work. Why? Could you please give me some ideas?

Thank you.

**JMRKER** · 02-14-2013 10:24 AM

Why not show the rest of the HTML display? I don't like to develop and test code from scratch if you have the start of something already.

Also, how are your classes currently defined in the <style> tag?

If you want help, it seems you should also want to help us help you!

**supercain** · 02-14-2013 10:44 AM

Well, the html is quite simple:

Code:

<div id="exp-banner">
<img src="transparent.png"  onmouseover="expand()">
</div>

Code:

#exp-banner {
    clip: rect(0px, 150px, 220px, 0px);
    position: absolute;
}

#ret-banner {
    clip: rect(0);
}

and thats about it.

Thank you.

**JMRKER** · 02-14-2013 12:59 PM

Your 'clip' seems to give a lot of warnings in FF. You might want to investigate that further.

However, you need not use .className if you show choose.
I saw no need for two different image elements.

Code:

<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
#exp-banner { clip: rect(0px, 150px, 220px, 0px); position: absolute; }
#ret-banner { clip: rect(0); }
</style>

</head>
<body>

<div>
 <img id="exp-banner" src="" onmouseover="expand()"> <!-- transparent.png ??? -->
</div>

<script type="text/javascript">
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgList = ['11.jpg','12.jpg'];

function retract() {
  document.getElementById("exp-banner").src = baseURL+imgList[0];
}
function expand() {
  document.getElementById("exp-banner").src = baseURL+imgList[1];
  setTimeout('retract()', 3000)
}
window.onload = function() {
  retract();
}
</script>

</body>
</html>

**postonoh** · 02-14-2013 01:10 PM

document.getElementsByClassName

**JMRKER** · 02-14-2013 01:15 PM

Originally Posted by postonoh

document.getElementsByClassName

OK in newer browsers.

You will need to create your own (google search or look on this forum) if older browsers.

**grumpyOleMan** · 02-14-2013 07:06 PM

Originally Posted by supercain

I tried just by changing it to document.getElementByClassName but it didnt work. Why? Could you please give me some ideas?

As already stated *document.getElementByClassName* is wrong and needs to be plural as it will return a nodeList which is a collection of elements.

BUT first your original work with the errors removed

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>error free orginal</title>
<style>
#exp-banner {
    clip: rect(0px, 150px, 150px, 0px);
    position: absolute;
}
#ret-banner {
    clip: rect(0, 0, 0, 0);
}
</style>
</head>
<body>
<div id="exp-banner">
<img src="http://lorempixel.com/400/400/animals/"  onmouseover="expand()">
</div>
<script>

function retract() {
    document.getElementById("ret-banner").id = 'exp-banner';
}
function expand() {
    document.getElementById("exp-banner").id = 'ret-banner';
    setTimeout(retract, 3000);
}
</script>
</body>
</html>

to be continued...

**grumpyOleMan** · 02-14-2013 07:13 PM

this is an alternative way to do it BUT with a click event as mouse over is worrisome..

This uses the new classList that is supported in all new browsers now.
if you require backward compatibility then add the work around. (homework for you).

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>class add remove</title>
<style>
.exp-banner {
    clip: rect(0px, 150px, 150px, 0px);
    position: absolute;
}
</style>
</head>
<body>
<p>Click image to enlarge....</p>
<div id="someID" class="exp-banner">
<img src="http://lorempixel.com/400/400/animals/"  id="omo">
</div>
<script>

function retract() {
    document.getElementById("someID").classList.add('exp-banner');
	document.getElementById('omo').addEventListener('click', expand, false);
}
function expand() {
    document.getElementById("someID").classList.remove('exp-banner');
	document.getElementById('omo').removeEventListener('click', expand, false);
    setTimeout(retract, 3000);
}
document.getElementById('omo').addEventListener('click', expand, false);
</script>
</body>
</html>

to be continued.

**grumpyOleMan** · 02-14-2013 07:17 PM

Now for the *document.getElementsByClassName* just to round it off..

Not perfect BUT you can do the homework...

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Node List</title>
<style>
.exp-banner {
    clip: rect(0px, 150px, 150px, 0px);
    position: absolute;
}
.ret-banner {
    clip: rect(0, 0, 0, 0);
}
</style>
</head>
<body>
<p>Click image to enlarge...</p>
<div class="exp-banner" id="omo">
<img src="http://lorempixel.com/400/400/animals/"  id="omo">
</div>
<script>

function retract() {
    var elementFromList = document.getElementsByClassName("ret-banner")[0];
	document.getElementById('omo').addEventListener('click', expand, false);
	elementFromList.classList.remove('ret-banner');
	elementFromList.classList.add('exp-banner');
}
function expand() {
    var elementFromList = document.getElementsByClassName('exp-banner')[0];
	document.getElementById('omo').removeEventListener('click', expand, false);
	elementFromList.classList.remove('exp-banner');
	elementFromList.classList.add('ret-banner');
    setTimeout(retract, 3000);
}
document.getElementById('omo').addEventListener('click', expand, false);
</script>
</body>
</html>

done.

**grumpyOleMan** · 02-14-2013 07:31 PM

sorry but an update

you can still use the *mouseover* event instead of the *click* event if you add/remove the event as I have done with the click event in the alternative versions..
just replace the string *click* with *mouseover* in each ***addEventListener*** and of course the ***removeEventListener***

I am getting to old for this...

**supercain** · 02-15-2013 02:54 AM

Hi,

thank you for your responses. Im afraid i didnt understand very well. Is it mandatory to use IDs for the elements with those codes? because the reason i want to convert my code from "get element by id" into "get element by object" is right because i cant use IDs. Please dont ask me why, because the explanation would get very long. The thing is that all this is PHP generated, so the code i posted is just an excerpt, since it will take forever to post it all. I just need to know if its possible to replace the IDs by the classes.

Thank you.

**supercain** · 02-21-2013 12:06 AM

Hello?? any help please?

**grumpyOleMan** · 02-21-2013 06:54 AM

Originally Posted by supercain

Is it mandatory to use IDs for the elements with those codes

...............

I just need to know if its possible to replace the IDs by the classes.

With the info that has been provided it it obvious that using classes to replace ID's cannot be done as you do not have any classes to start with...

So the answer would be NO...

if by any chance I am wrong again and you want to replace all the ID.s in the code to classes then yes you can BUT you need to clearer with you explanation because your last request is a bit hazy still...

**supercain** · 02-21-2013 07:04 AM

But i DO have classes:

and the class exp-banner should change into ret-banner on mouse over. I just want to modify the original work from having id="exp-banner" to class="exp-banner" so i can work with classes instead of IDs.

Thank you.

**grumpyOleMan** · 02-21-2013 07:12 AM

as I said *with the info given*

and you had ID's in your original request....

the examples I gave had classes instead of IDs.

if you replace ID's with classes you need be aware that changing them in in the HTML part will require changes to the CSS as well..

Thread: Get element by class?

Thread Tools

Display

Get element by class?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions