CODEWITHSUNDEEP
javascriptdom
19wolf
19wolf

Reputation: 402

Insert variable into html code

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

Upvotes: 3

Views: 9024

Answers (4)

flowfree
flowfree

Reputation: 16462

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.

Upvotes: 1

bfavaretto
bfavaretto

Reputation: 71908

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;
}

Upvotes: 1

xcopy
xcopy

Reputation: 2288

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

Upvotes: 4

KoU_warch
KoU_warch

Reputation: 2150

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

Upvotes: 1

Related Questions