1

我是网络开发的新手。我有一个代码应该在单击图像时更改图像，并在释放时将图像更改回来。它还计算被点击的次数。我在 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>
4

2 回答 2

2

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

未捕获的类型错误：对象# 的属性“图像”不是函数

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

document.images["bigRedButton"].src

我不知道为什么它可以在 Safari 上运行。

于 2012-04-03T20:32:45.790 回答
1

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

document.images 记录了一个整数索引的图像数组。可以肯定的是，您应该使用：

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

尽管在许多情况下也可以使用名称访问图像。

于 2012-04-03T20:36:09.327 回答