Making a HTML link to a JavaScript Array for a JS Slider

Question

So I want to create links in my website to link to an array in script.js file which is where I contain my JavaScript for the content slider I've created.

The idea is to click a link from this html:

  <div id="slider"> <h2 id="sliderHeader">Social Determinants of Health</h2> <p>______________________</p> <p id="sliderPara">In terms of health - good quality health care is a determinant of health, and access, affordability, and acceptability of health are all socially determined. But most social determinants of health lie outside the health care system.</p> <a href="#"><input class="readmore_button" type="submit" value="Read more" /></a> </div> <div class="slider_menu"> <ul> <li><a href="#">Social Determinants of Health</a></li> <li><span style="color:#fff;">|</span></li> <li><a href="#">Monitoring Progress</a></li> <li><span style="color:#fff;">|</span></li> <li><a href="#">What Works</a></li> <li><span style="color:#fff;">|</span></li> <li><a href="#">Making it Happen</a></li> </ul> </div> 

To link to one of my arrays which is a separate slider. As seen below:

 var headArray= ['Social Determinants of Health', 'Monitoring Progress', 'What Works', 'Making it Happen']; 

Is this even possible? If not is there a workaround?

ps this is the website I'm working on http://hghazni.com/ihe/

Cheers!

Answer 1

I figured it out. I just made a function for each value in the array variable which reset the slider count and slider interval time. Then grabbed the relevant element id's.

 function slider_link_1() { cnt = 0; timer = setInterval(slider, 5000); var slider = document.getElementById('slider'); slider.style.backgroundImage = "url(\\'" + imgadr[cnt] + "\\')"; document.getElementById('sliderHeader').innerHTML = headArray[0]; document.getElementById('sliderPara').innerHTML = paraArray[0]; } function slider_link_2() { cnt = 1; timer = setInterval(slider, 5000); var slider = document.getElementById('slider'); slider.style.backgroundImage = "url(\\'" + imgadr[cnt] + "\\')"; document.getElementById('sliderHeader').innerHTML = headArray[1]; document.getElementById('sliderPara').innerHTML = paraArray[1]; } function slider_link_3() { cnt = 2; timer = setInterval(slider, 5000); var slider = document.getElementById('slider'); slider.style.backgroundImage = "url(\\'" + imgadr[cnt] + "\\')"; document.getElementById('sliderHeader').innerHTML = headArray[2]; document.getElementById('sliderPara').innerHTML = paraArray[2]; } function slider_link_4() { cnt = 3; timer = setInterval(slider, 5000); var slider = document.getElementById('slider'); slider.style.backgroundImage = "url(\\'" + imgadr[cnt] + "\\')"; document.getElementById('sliderHeader').innerHTML = headArray[3]; document.getElementById('sliderPara').innerHTML = paraArray[3]; } 

Then I ended up linking them on my index.html like this:

 <div class="slider_menu"> <ul> <li><a href="#" onclick="slider_link_1()">Social Determinants of Health</a> </li> <li><span style="color:#fff;">|</span> </li> <li><a href="#" onclick="slider_link_2()">Monitoring Progress</a> </li> <li><span style="color:#fff;">|</span> </li> <li><a href="#" onclick="slider_link_3()">What Works</a> </li> <li><span style="color:#fff;">|</span> </li> <li><a href="#" onclick="slider_link_4()">Making it Happen</a> </li> </ul> </div> 

And now it works! That was hard, but I learnt a lot! Thanks to the people who pointed me in the right direction for me to figure it out myself.

Live version here: http://hghazni.com/ihe