Using javascript to target class

Question

I have the following script in the head Element:

<script>
function changeOpacity(className) {

var elems = document.getElementsByClassName(className);
var index = 0, length = elems.length;
for ( ; index < length; index++) {
    elems[index].style.transition = "opacity 0.3s linear 0s";
    elems[index].style.opacity = 0.8;
    }
}
</script>

<style>
.red_box {width:100px;height:100px;opacity:1;background:red}
</style>

and the following structure in the body Element:

<div onmouseover="changeOpacity('.red_box')">Click to fade red boxes</div>

<div class="red_box">Box 1</div>
<div class="red_box">Box 2</div>
<div class="red_box">Box 3</div>

I'm trying to achieve the following: when the user clicks on the 'Click to fade red boxes' message, the function should make each div with the class: 'red_box' to turn transparent. I would love some pointers (not Jquery please), Thanks!

The opacity is set to 1 in the CSS, and then your JavaScript code also sets it to 1. Did you mean to set it to 0? — Pointy
– Pointy, Commented Apr 4, 2016 at 21:18
Oops! Thanks Pointy - sorry for confusion. Yes, the function should have the opacity at 0.8 I have edited my question now — user2840467
– user2840467, Commented Apr 5, 2016 at 4:53

Christofer Eliasson · Accepted Answer · 2016-04-04 21:25:23Z

3

Remove the dot in the class name when calling the function:

onmouseover="changeOpacity('red_box')"

document.getElementsByClassName(className) takes the class name as a string. If you want to use a CSS selector, you can use document.querySelectorAll('.red_box') instead.

As pointed out by @pointy in his comment, you also set the opacity to the same as the initial value. Probably want to change that to something between 0 and 0.9, depending on the level of transparency you want.

edited Apr 4, 2016 at 21:25

answered Apr 4, 2016 at 21:19

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2840467 Over a year ago

I've been getting mixed up with needing the . in the class name for querySelectorAll and not needing it for getElementByClassName! Thanks Christofer

Paul Fitzgerald · Accepted Answer · 2016-04-04 21:18:54Z

1

You had set the opacity to the same in the css and the function, and also you needed to remove the dot in onmouseover="changeOpacity('red_box')"

Change your js function and html to be something like the below and it will work nicely.

function changeOpacity(className) {

  var elems = document.getElementsByClassName(className);
  console.log(elems)
  var index = 0,
    length = elems.length;
  for (; index < length; index++) {
    elems[index].style.transition = "opacity 0.3s linear 0s";
    elems[index].style.opacity = 0.5;
  }
}

.red_box {
  width: 100px;
  height: 100px;
  opacity: 1;
  background: red
}

<div onmouseover="changeOpacity('red_box')">Click to fade red boxes</div>

<div class="red_box">Box 1</div>
<div class="red_box">Box 2</div>
<div class="red_box">Box 3</div>

answered Apr 4, 2016 at 21:18

Paul Fitzgerald

12.1k4 gold badges45 silver badges57 bronze badges

2 Comments

user2840467 Over a year ago

Am now using this code - thanks Paul - it was definitely that addition I'd made of the dot in the class that was causing the main problem (but my typo of having the function's opacity set to 1 didn't help!)

Paul Fitzgerald Over a year ago

@user2840467 no problem, glad to help!

Collectives™ on Stack Overflow

Using javascript to target class

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related