CODEWITHSUNDEEP
javascript
user1200640
user1200640

Reputation: 1087

javascript code is only working with mozzila firefox?

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>

Upvotes: 1

Views: 278

Answers (3)

Master Yogurt
Master Yogurt

Reputation: 116

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()

Upvotes: 4

Rick Hoving
Rick Hoving

Reputation: 3575

you have a double r in document.wrriteln

Upvotes: 0

Jivings
Jivings

Reputation: 23260

You need to change these:

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

To onclick events.

<a href="#" onclick="javascript: window.location.href = prevImage();return false;"> <img border="0" src="Assets/Left.png" /></a>
<a href="#" onclick="javascript: window.location.href = nextImage();return false;"> <img border="0" src="Assets/Right.png"/></a>

Or better still, put them into functions.

Upvotes: 0

Related Questions