Insert variable into html code

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">

Are you willing to use jQuery?

astro boy
– astro boy

2012-06-20 01:56:29 +00:00
Commented Jun 20, 2012 at 1:56 — astro boy
– astro boy, Commented Jun 20, 2012 at 1:56

xcopy · Accepted Answer · 2012-06-20 02:18:00Z

4

HTML does not have a concept of variables. You would need the variable to be stored/manipulated in javascript. That is not to say that you cannot refactor the function to be used in a more general sense. Consider the following:

JS

var key = 1;

function nextImage(id) {
    if(key == 52)
    {
        key = 0;
    }else{
        key++;
    }

    var image = document.getElementById(id);
    var src = image.getAttribute('data-src').replace('{0}', key);
    image.src = src;
};

HTML

<button type="button" onclick="nextImage('mainImage')">Next</button>
<img id="mainImage" data-src="images/52/week_{0}.jpg" src="images/52/week_0.jpg" />
<button type="button" onclick="nextImage('otherImage')">Next</button>
<img id="otherImage" data-src="images/356/week_{0}.jpg" src="images/356/week_0.jpg" />

edited Jun 20, 2012 at 2:18

answered Jun 20, 2012 at 1:59

xcopy

2,26419 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

19wolf Over a year ago

The problem then is that not all my images are stored in "images/52/", some are stored in "images/365" or "images/other". I'm trying to avoid naming image locations in the "nextImage()" script. Perhaps name it somewhere on the page and pass it through?

bfavaretto Over a year ago

There was no downvote. I upvoted your answer but later changed my mind, because you hadn't address the issue of flexible paths. After the edit you do, but I'm not sure the op is is looking for two image/button pairs in the same page, so I removed my upvote.

xcopy Over a year ago

The two button/image pairs are simply to show that the function can be reused by different image sets, as that is one on the OP requirements.

bfavaretto Over a year ago

You're right. I'm tired, I guess I should close SO now... Fair enough, your upvote is back.

KoU_warch · Accepted Answer · 2012-06-20 02:15:20Z

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" />

edited Jun 20, 2012 at 2:15

answered Jun 20, 2012 at 2:03

KoU_warch

2,1501 gold badge25 silver badges46 bronze badges

2 Comments

19wolf Over a year ago

What would I do in the HTML? Where does "string" come from (where is it stored?)?

Felix Kling Over a year ago

@EricWolf: onclick="nextImage('images/52/week_')">. Of course if you are doing this for several image sequences on the same site, each sequence must have its own counter.

bfavaretto · Accepted Answer · 2012-06-20 02:20:54Z

1

You can either pass the path as a parameter, as EH_warch said, or get it from the <img> itself like this:

var key = 1;
function nextImage()
{
    if(key == 52)
    {
        key = 0;
    } else {
        key++;
    }
    var imageElement = document.getElementById("mainImage");
    var path = imageElement.getAttribute('src').split('/');
    path.pop();
    path = path.join('/');
    var image = path + '/' + key + ".jpg";
    imageElement.src= image;
}

edited Jun 20, 2012 at 2:20

answered Jun 20, 2012 at 2:07

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

1 Comment

bfavaretto Over a year ago

Update: use imageElement.getAttribute('src') instead of imageElement.src. Also, there was a problem with my pop chaining, now fixed.

flowfree · Accepted Answer · 2012-06-20 02:23:33Z

1

You can use regular expression to modify the src property.

function nextImage() {
    var img = document.getElementById("mainImage");
    var s = img.src.match(/^(.+_)(\d+)(\.jpg)$/);
    var key = s[2];

    if (key == 52) {
      key = 0;
    } else {
      key++;
    }

    img.src = s[1] + key + s[3];
}

Note: As FelixKling said in the comment, the regex pattern must match with the image filenames.

edited Jun 20, 2012 at 2:23

answered Jun 20, 2012 at 2:11

flowfree

16.5k12 gold badges55 silver badges79 bronze badges

1 Comment

Felix Kling Over a year ago

This is a good idea, but only works if the files all have the same name pattern. OP has to confirm this.

Collectives™ on Stack Overflow

Insert variable into html code

4 Answers 4

4 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related