CODEWITHSUNDEEP
javascriptjqueryfor-loopundefined
Paul Bamforth
Paul Bamforth

Reputation: 53

Outputting javascript array values in a for loop results in undefined

I'm trying to use a loop to output values from two arrays on a jQuery hover function. Outside of the hover, I can access these array values fine but inside I get undefined.

JavaScript is still new to me, so please enlighten me to any of my rookie mistakes. Thanks.

jQuery(document).ready(function($){
var originalWheelContent = $('.wheel-content').html(),
    transitionSpeed = 400,
    segmentTitle = ['collaborative','compassionate','inclusive','empowering','responsive'],
    segmentParagraph = [
        'Working together to deliver the best possible outcomes and recognises and values the contribution of others.',
        'Constantly looking for new ways to satisfy the needs of those you work with or care for. Acting with consideration and understanding for others feelings.',
        'Actively seeking and creating opportunities to include others, fostering an environment where everyone feels valued and respected.',
        'Enabling positive change and supporting others to reach their maximum potential.',
        'Reacting positively to change and others needs by being creative and innovative in finding solutions.'
    ];

for(x = 0; x < segmentTitle.length; x++){
    $('.wheel-graphic map area#' + segmentTitle[x]).hover(
        function(){
            $('.wheel-content').fadeOut(transitionSpeed,function(){
                $('.wheel-content').replaceWith('<div class="wheel-content"><h2 class="segment-title">' + segmentTitle[x] + '</h2><h4 class="segment-p">' + segmentParagraph[x] + '</h4></div>');
            });
        }, function() {
            $('.wheel-content').fadeIn(transitionSpeed);
            $('.wheel-content').replaceWith('<div class="wheel-content">' + originalWheelContent + '</div>');
        }
    );
   }
});

enter image description here

Upvotes: 0

Views: 45

Answers (1)

Rounin
Rounin

Reputation: 29453

To avoid undefined, you need to ensure that the loop incrementing variable x is scoped correctly.

Use let:

for (let x = 0; x < segmentTitle.length; x++)

Upvotes: 2

Related Questions