Question

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=viewcomic&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).

Answer 1

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

document.getElementById("yourLinkId").href = "?action=viewcomic&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=viewcomic&id=" + window.imgIndex);
});