Home/ Questions/Q 7833267
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T12:38:10+00:00

I’m learning javascript and I’m having trouble figuring out why my script is not

  • 0

I’m learning javascript and I’m having trouble figuring out why my script is not working. I’m guessing its because the imageIn and imageOut functions don’t have access to the counter variable. How would I go about fixing this? Both imageIn and imageOut have errors in my error console ‘undefined’.

<style type="text/css">

ul {
    list-style-type:none;
}

</style>

<body>

<div id="slideShow">

    <ul>
        <li>
            <img src="stockboat.png" alt="Steam Boat" id="boat" />
        </li>   
    </ul>

</div>

<script type="text/javascript" src="getElementsByClassName.js"></script>
<script type="text/javascript">

    var image = document.getElementsByTagName('img');

    for (i = 0, ii = image.length; i < ii; i++)  {
        image[i].style.opacity = "0.5";
        image[i].addEventListener('mouseover', imageIn, 'false');
        image[i].addEventListener('mouseout', imageOut, 'false');   
    }

    function imageIn() {
        image[i].style.opacity = "1";   
    }

    function imageOut() {
        image[i].style.opacity = "0.5";
    }
</script>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you’re right about it not recognizing your iteration variable, you’ll have to do:

    Use reference object:

    function imageIn() {
    this.style.opacity = "1";         // use "this" instead of image array
}

function imageOut() {
    this.style.opacity = "0.5";        // use "this" instead of image array
}

    -or-

    Closure Approach:

    image[i].addEventListener('mouseover'
                         , (function(obj){return function(){imageIn(obj)};})(image[i])
                         , 'false');
image[i].addEventListener('mouseout'
                         , (function(obj){return function(){imageOut(obj)};})(image[i])
                         , 'false');

    Need to change function definition:

    function imageIn(obj) {          // added parameters "obj"
    obj.style.opacity = "1";   
}

    This method allows you to reference the loop variable, which is nice to have as an example for when using setTimeOut in a loop – so you can reuse code later 🙂

    • 0