Question

I’m new to Javascript, and I’ve done a bunch of searching but nothing I find seems to answer my specific question. I’m trying to figure out how to implement a variable into html… It might be better served with examples:

Javascript

var key = 1;

function nextImage()
{
    if(key == 52)
    {
        key = 0;
    }else{
        key++;
    }
    var image = "images/52/week_" + key + ".jpg";
    document.getElementById("mainImage").src= image;
}

HTML

<button type="button" onclick="nextImage()">Next</button>
<img id="mainImage" src="images/52/week_0.jpg" />

What I’m trying to do is move the “images/52/week_” out of the javascript and into the html, so I can reuse the function for other image sets. Basically I would like to make the script iterate through the numbers, and then send those numbers into the HTML <img src="images/52/week_" + image + ".jpg">

Answer 1

Wouldnt be easier to add parameters to your function?

 var key = 1;

 function nextImage(string,id)
 {
     if(key == 52)
     {
        key = 0;
     }else{
        key++;
     }
     var image = string + key + ".jpg";
     document.getElementById(id).src= image;
 }

Update
That question is answered by yourself! using the code you gave above you only need to add the two parameters to your javascript call, for example:

 <button type="button" onclick="nextImage('string','mainImage')">Next</button>
 <img id="mainImage" src="images/52/week_0.jpg" />