Javascript: Arrays, For-Loops and Functions

Question

I have this working code but am not sure how to create a proper loop.

Looking for a way to create a function where one mousesovers an #id in a list element and doing so changes the url source of #mainImage to the one in the imgUrl array.

using forEach seems like a good option and am having problems setting it up.

var imgUrl = []; imgUrl[0] = "url 1"; imgUrl[1] = "url 2"; imgUrl[2] = "url 3"; imgUrl[3] = "url 4"; imgUrl[4] = "url 5"; imgUrl[5] = "url 6"; imgUrl[6] = "url 7"; (document).ready(function() { // mouse over ids in list $("#id-1").mouseover(function() { $("#mainImage").attr("src", imgUrl[0]) }); //mouse over 2 $("#id-2").mouseover(function() { $("#mainImage").attr("src", imgUrl[1]) }); //mouse over 3 $("#id-3").mouseover(function() { $("#mainImage").attr("src", imgUrl[2]) }); });

<div class="main"> <img id="mainImage" src="url"> </div> <ul class="menu"> <li><a href="#" id="id-1">one</a></li> <li><a href="#" id="id-2">two</a></li> <li><a href="#" id="id-3">three</a></li> <li><a href="#" id="id-4">four</a></li> <li><a href="#" id="id-5">five</a></li> <li><a href="#" id="id-6">six</a></li> <li><a href="#" id="id-7">seven</a></li> </ul>

CertainPerformance · Accepted Answer · 2018-05-16 02:27:57Z

Rather than using forEach, it would be more elegant to use only one listener (on the ul) and check the event.target (the hovered element)'s index in the list, and access the same index in the imgUrl array. No jQuery needed for plain DOM manipulation:

const imgUrl = []; imgUrl[0] = "https://www.gravatar.com/avatar/56a79d2067e203926e68dae37adbea58?s=32&d=identicon&r=PG&f=1" imgUrl[1] = "https://www.gravatar.com/avatar/34932d3e923ffad9a4a1423e30b1d9fc?s=32&d=identicon&r=PG&f=1"; imgUrl[2] = "url 3"; imgUrl[3] = "url 4"; imgUrl[4] = "url 5"; imgUrl[5] = "url 6"; imgUrl[6] = "url 7"; const menu = document.querySelector('.menu'); const mainImage = document.querySelector('#mainImage'); menu.addEventListener('mouseover', (e) => { if (e.target.tagName !== 'A') return; const index = [...menu.children].indexOf(e.target.parentElement); mainImage.src = imgUrl[index]; });

 <img id="mainImage" src="url"> </div> <ul class="menu"> <li><a href="#" id="id-1">one</a></li> <li><a href="#" id="id-2">two</a></li> <li><a href="#" id="id-3">three</a></li> <li><a href="#" id="id-4">four</a></li> <li><a href="#" id="id-5">five</a></li> <li><a href="#" id="id-6">six</a></li> <li><a href="#" id="id-7">seven</a></li> </ul>

The tagName - it checks to see if the hovered element is an <a>.
menu.addEventListener('mouseover', (e) => { e is the parameter?
e is the event. See addEventListener It's the same parameter that jQuery handlers get

Zohaib Ijaz · Accepted Answer · 2018-05-16 02:32:20Z

You can add listeners in a loop

 var urls = ['url1', url2', 'url3', 'url4','url5', 'url6'] Array.from(Array(6)).forEach((_, index) => { $("#id-"+ (index + 1)).mouseover(() => $("#mainImage").attr("src", urls[index])); });

Thanks!! I am new to javascript. Will learn more about listeners

Collectives™ on Stack Overflow

Javascript: Arrays, For-Loops and Functions

2 Answers 2

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Related