Question

On my website, I have an image viewer. Every time the user click the left or right button the url of the page will be changed aromatically. The image src uses a specific number from the url of the current page (the only number in the url). Below I have provided the code I am using. The code is working perfectly, but it is only working on mozilla firefox. How can I fix it in order to make it work for all browsers. The problem on the other browsers is that the image do not show up.

<img src="" id="image" >
    <script type="text/javascript">
        document.getElementById('image').src ="Images/"+location.href.match(/\d+/)+".jpg";
        <br/>
        document.wrriteln(location.href.match(/\d+/)+".jpg");
    </script>
    <br/>
    <script>
    var url = location.href;
    function nextImage() {
        return(url.replace(/(\d+)(\.html)$/, function(str, p1, p2) {
            return((Number(p1) + 1) + p2);
        }));
    }
    function prevImage() {
        return(url.replace(/(\d+)(\.html)$/, function(str, p1, p2) {
            return((Number(p1) - 1) + p2);
        }));
    }
    </script>
      <a href="javascript: window.location.href = prevImage();"> <img border="0" src="Assets/Left.png" /></a>
      <a href="javascript: window.location.href = nextImage();"> <img border="0" src="Assets/Right.png"/></a>

Answer 1

What you should do is

<a href="#" id="prevImageControl">

and in the javascript block do

prevImageClick = function()
{
    window.location.href = prevImage();
}

var prevImageControl = document.getElementById('prevImageControl');
prevImageControl.addEventListener('click', prevImageClick);

repeat for nextImage()