Using .style.opacity = using javascript is not working for some reason

Question

I'm new to javascript and jquery and I am trying to make a video's opacity change when I mouseover a li item. I know 'onmouseover' works because I have tested using the same jquery I use to scroll to the top of the page onclick.

The problem seems to be the syntax to check and update the style of the video div is not working. I adapted the code from a lesson on codeacademy and don't see why it work:

window.onload = function () {

    // Get the array of the li elements    
    var vidlink = document.getElementsByClassName('video');

    // Get the iframe
    var framecss = document.getElementsByClassName('videoplayer1');

    // Loop through LI ELEMENTS   
    for (var i = 0; i < vidlink.length; i++) {
        // mouseover function:
        vidlink[i].onmouseover = function () {
            //this doesn't work:
            if (framecss.style.opacity === "0.1") {
                framecss.style.opacity = "0.5";
            }
        };
        //onclick function to scroll to the top when clicked:
        vidlink[i].onclick = function () {
            $("html, body").animate({
                scrollTop: 0
            }, 600);
        };
    }
};

Here is a jsfiddle you can see the html and css:

http://jsfiddle.net/m00sh00/CsyJY/11/

It seems like such a simple problem so I'm sorry if I'm missing something obvious.

Any help is much appreciated

possible duplicate of opacity and style undefined when accesing element in js but defined in css — JJJ
– JJJ, Commented Aug 3, 2013 at 13:53

nnnnnn · Accepted Answer · 2013-08-03 14:16:56Z

1

Try this:

    vidlink[i].onmouseover = function () {
        if (framecss[0].style.opacity === "0.1") {
            framecss[0].style.opacity = "0.5";
        }
    };

Or alternatively:

var framecss = document.getElementsByClassName('videoplayer1')[0];

Or, better, give the iframe an id and use document.getElementById().

The getElementsByClassName() function returns a list, not a single element. The list doesn't have a style property. In your case you know the list should have one item in it, which you access via the [0] index.

Or, given that you are using jQuery, you could rewrite it something like this:

$(document).ready(function(){
    // Get the iframe
    var $framecss = $('.videoplayer1');

    $('.video').on({
        mouseover: function () {
            if ($framecss.css('opacity') < 0.15) {
                $framecss.css('opacity', 0.5);
            }
        },
        click: function () {
            $("html, body").animate({
                scrollTop: 0
            }, 600);
        }
    });
});

Note that I'm testing if the opacity is less than 0.15 because when I tried it out in your fiddle it was returned as 0.10000000149011612 rather than 0.1.

Also, note that the code in your fiddle didn't run, because by default jsfiddle puts your JS in an onload handler (this can be changed from the drop-down on the left) and you then wrapped your code in window.onload = as well. And you hadn't selected jQuery from the other drop-down so .animate() wouldn't work.

Here's an updated fiddle: http://jsfiddle.net/CsyJY/23/

edited Aug 3, 2013 at 14:16

answered Aug 3, 2013 at 13:58

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

2 Comments

Kit Over a year ago

Thanks nnnnnn. This is an excellent answer, which addresses everything I wanted to know and more. Thanks for the tip with jfiddle, only just started using this tool. How did you view what the number was returned as? This is something I never would have thought about.

nnnnnn Over a year ago

I added a console.log($framecss.css('opacity')) statement at the beginning of the mouseover function (actually I just checked and I had left that in my fiddle). Note that if you check style.opacity directly it would probably come back as an empty string because you hadn't set the opacity on the element itself, you'd set in in a class.

Collectives™ on Stack Overflow

Using .style.opacity = using javascript is not working for some reason

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related