Question

我是网络开发的新手。我有一个代码，当点击图像时应该更改图像，并在发布时更改图像。并且还计算它被点击的次数。我在Safari上构建并测试了这段代码，我没有遇到任何问题。它在Safari上运行正常。但是它不适用于Chrome和IE（我没有测试任何其他浏览器）。

我通常使用HTML5 Boilerplate但是我减少了代码，以便我可以在这里显示（此版本也不起作用）。

我已经给出了以下页面的代码。我该怎么做才能使它适用于每个浏览器。它在浏览器上的行为有何不同？

提前致谢

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

Answer 1

在Chrome中进行测试时，请记得使用其JavaScript控制台来查看错误。在这种情况下，它返回以下内容：

未捕获的TypeError：对象＃的属性“图像”不是函数

当您尝试访问document.images（“bigRedButton”）时，您的问题出现在第18行和第24行 - document.images是一个数组（或可能是一个对象），而不是一个函数。它应该是：

document.images [ “bigRedButton”]。SRC

我不知道为什么它适用于Safari。

Answer 2

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

document.images记录了整数索引的图像数组。要确定，你应该使用：

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

虽然使用该名称访问图像也适用于许多情况。

浏览器之间的javascript鼠标事件兼容性问题

2 个答案: