I have a JavaScript variable imgIndex that I'd like to send to an <a href="..."> so I can change the id based on imgIndex

Javascript:

<script type="text/javascript">

var imgArray = [<?php echo implode(',', getImages($cat, $site)) ?>];
window.imgIndex = <?php echo $imgid ?>;

$(document).ready(function() {      

    var img = document.getElementById("showimg");
    img.src = imgArray[<?php echo $imgid ?>];

    $(document).keydown(function (e) {
        var key = e.which;
        var rightarrow = 39;
        var leftarrow = 37;
        var random = 82;

        if (key == rightarrow) 
        {
            imgIndex++;
            if (imgIndex > imgArray.length-1) 
            {
                imgIndex = 0;
            }
            img.src = imgArray[imgIndex];
        }
        if (key == leftarrow) 
        {
            if (imgIndex == 0) 
            {
                imgIndex = imgArray.length;
            }
            img.src = imgArray[--imgIndex];
        }
        if (key == random) 
        {
            imgIndex = Math.floor((Math.random()*(imgArray.length-1))+1);
            img.src = imgArray[imgIndex];
        }   

    });
});

</script>

HTML: Then send imgIndex here so the id of the image will equal imgIndex:

<a href="?action=viewic&id=imgIndex"><img id="prevkey" src="./images/SiteDesign/prev.png" alt="Comic Navigation" /></a>

But it doesn't work.

Any suggestions on how to pass it to <a href="...">?

EDIT:

The reason I can't use is because I need to manipulate a javascript variable, not a number (as the browser renders the php value).

I have a JavaScript variable imgIndex that I'd like to send to an <a href="..."> so I can change the id based on imgIndex

Javascript:

<script type="text/javascript">

var imgArray = [<?php echo implode(',', getImages($cat, $site)) ?>];
window.imgIndex = <?php echo $imgid ?>;

$(document).ready(function() {      

    var img = document.getElementById("showimg");
    img.src = imgArray[<?php echo $imgid ?>];

    $(document).keydown(function (e) {
        var key = e.which;
        var rightarrow = 39;
        var leftarrow = 37;
        var random = 82;

        if (key == rightarrow) 
        {
            imgIndex++;
            if (imgIndex > imgArray.length-1) 
            {
                imgIndex = 0;
            }
            img.src = imgArray[imgIndex];
        }
        if (key == leftarrow) 
        {
            if (imgIndex == 0) 
            {
                imgIndex = imgArray.length;
            }
            img.src = imgArray[--imgIndex];
        }
        if (key == random) 
        {
            imgIndex = Math.floor((Math.random()*(imgArray.length-1))+1);
            img.src = imgArray[imgIndex];
        }   

    });
});

</script>

HTML: Then send imgIndex here so the id of the image will equal imgIndex:

<a href="?action=viewic&id=imgIndex"><img id="prevkey" src="./images/SiteDesign/prev.png" alt="Comic Navigation" /></a>

But it doesn't work.

Any suggestions on how to pass it to <a href="...">?

EDIT:

The reason I can't use is because I need to manipulate a javascript variable, not a number (as the browser renders the php value).

• javascript
• html

• 3 your question isn't clear. you should do your homework before posting a question. – Sourabh Commented Nov 14, 2012 at 23:37
• 2 you will need to show the code where the anchor <a> is generated. – cillierscharl Commented Nov 14, 2012 at 23:38
• 1 Couldn't you just move the <?php echo $imgid ?> into the href of the <a> tag? – Cᴏʀʏ Commented Nov 14, 2012 at 23:42

3 Answers 3

You can manipulate the target of the link after you are done processing imgIndex.

document.getElementById("yourLinkId").href = "?action=viewic&id=" + window.imgIndex;

Other than that, you can append an event handler to the link, which I am showing here as a sample for jQuery:

$("#yourLinkId").on("click", function()
{
    $(this).attr("href", "?action=viewic&id=" + window.imgIndex);
});

You can do it this way, if you echo imgIndex into the <a> tag like so:

<a href="?action=viewic&id=<?php echo $imgid ?>"><img id="prevkey" src="./images/SiteDesign/prev.png" alt="Comic Navigation" /></a>

Then you can get the imgid from the querystring with:

<?php $imgid = $_GET["id"] ?>

You can not use the php variable in link? if you can, is the best solution.

<a href="?action=viewic&id=<?php echo $imgid; ?>"><img id="prevkey" src="./images/SiteDesign/prev.png" alt="Comic Navigation"/></a>