Javascript not responding to classes

Question

612wharfavenue 0 Newbie Poster

13 Years Ago

Im trying various ways to trigger a transition, the simplest being the use of css pseudoclasses:

//leaving out default header stuff//
<head>
<style>
.item{
opacity:1;
-moz-transition: opacity 1s ease;
}
.item:hover {
opacity:0;
}
</style>
</head>
<body>
<img src="myimage.jpg" class="item" />
</body>

If i use js to make it trigger onclick instead of hover it works fine:

//leaving out default header stuff//
<head>
<style>
#item{
opacity:1;
-moz-transition: opacity 1s ease;
}
</style>
<script type="text/javascript">
function transition() {
            document.getElementById('item').style.opacity="0";
}
</script>
</head>
<body>
<img src="myimage.jpg" id="item" onclick="transition()" />
</body>

But if i replace the id's with classes, it no longer works:

//leaving out default header stuff//
<head>
<style>
.item{
opacity:1;
-moz-transition: opacity 1s ease;
}
</style>
<script type="text/javascript">
function transition() {
            document.getElementsByClassName('item').style.opacity="0";
}
</script>
</head>
<body>
<img src="myimage.jpg" class="item" onclick="transition()" />
</body>

What am i doing wrong?

javascript

2 Contributors
3 Replies
82 Views
9 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by bvelez352

bvelez352 0 Light Poster

13 Years Ago

this is why I don't even bother with JavaScript.... this is a simple effect that could be achieved by using jQuery. You might want to try that

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

612wharfavenue 0 Newbie Poster · Answer 1 · 2011-01-29T05:10:24+00:00

Seems to be the consensus that jquery is better to use than js. Others have told me i have to loop through the elements and gave me a script to do it, but i can already see it becoming a clusterfuck.

bvelez352 0 Light Poster · Answer 2 · 2011-01-29T05:18:14+00:00

I've tried to use JavaScript a couple of times and end up using jQuery, it's a matter of less writing and easier to do.

Here is what I would do with jQuery:

<a href="#" class="className"><img src="myimage.jpg" class="imageClass" alt="My Image" /></a>

$(function(){
	$('a.className').toggle(function(){
		$('img.imageClass').animate({opacity:0}, 500);
	}, function(){
		$('img.imageClass').animate({opacity:1},500);	
	});

});