javascript mouse event compatibility issue between browsers

Go To StackoverFlow.com

1

I am new to the web development. I have a code that's supposed to change images when clicked on the image, and change the image back when released. And also it counts how many times it is clicked. I was building and testing this code on Safari and I didn't had any problems. It works just as expected on Safari. However it does not work on Chrome and IE (I haven't tested any other browsers).

I was normally working with HTML5 Boilerplate however I reduced the code so that I can show here (This version doesn't work too).

I have given the code of the page below. What should I do to make it work on every browser. What is the reason that it acts differently on browsers?

Thanks in advance

<!html>
<html>
<head>

      <title></title>
    <script type="text/javascript">
    var count = 0;

    function incrementCount()
    {
        count++;
        document.getElementById( "count").innerHTML = count;

    }

    function pushTheButton()
    {
        document.images("bigRedButton").src = "img/pressed.gif";
        return true;
    }

    function releaseTheButton()
    {
        document.images("bigRedButton").src = "img/unpressed.gif";
        return true;
    }
    </script>
</head>

<body>
      <div role="main">
        <p>
            <img src = "img/unpressed.gif" name="bigRedButton" onmousedown="pushTheButton()" onmouseup="releaseTheButton()" onclick="incrementCount()"/>
            </br>
            Click Count:<p id="count">0</p>
        </p>
      </div>

</body>
</html>
2012-04-03 20:20
by Perex19
If I can make a suggestion, look into using jQuery. It has great cross browser support. When you use a framework like jQuery you can make one statement and don't have to worry about cross browser compatibility. jQuery is heavily tested for this issue - Dave Thomas 2012-04-03 20:23
actually I was using jquery. However it produced the same problem. I just shortened the code so that I can show her - Perex19 2012-04-03 20:24
I think I am wrong. I am not using JQuery code in this. However, even if its not query, i still wonder why it wasn't working in javascript - Perex19 2012-04-03 20:30
@DaveThomas—far better for the OP to learn very basic javascript than load a 4,000 line library to support a couple of lines of code - RobG 2012-04-03 20:39


2

When testing in Chrome, remember to use its JavaScript console to watch for errors. In this case, it returns the following:

Uncaught TypeError: Property 'images' of object # is not a function

Your problem is on lines 18 and 24, when you attempt to access document.images("bigRedButton") -- document.images is an array (or possibly an object), not a function. It should be:

document.images["bigRedButton"].src

I don't know why it worked on Safari.

2012-04-03 20:32
by Jack M
Thanks for spotting the problem - Perex19 2012-04-03 20:38
For the record, document.images is an HTMLCollection, a type of NodeList. They are similar to arrays in that they have a special length property and their members (arranged in DOM order) can be accessed by name, id or numeric index, but that's where the similarity ends. Both are live, meaning you don't have to get a new reference when they change - RobG 2012-04-03 20:45
By the way, I didn't even mention how to bring up Chrome's console. It's Ctrl+Shift+J - Jack M 2012-04-03 21:00


1

http://www.w3schools.com/jsref/coll_doc_images.asp

document.images is documented a integer-indexed array of images. To be really sure, you should use:

document.images[0].src = ...

Although accessing the image by using the name works in many cases as well.

2012-04-03 20:36
by Simon Forsberg