1

私はWeb開発に不慣れです。画像をクリックすると画像を変更し、離すと画像を元に戻すというコードがあります。また、クリックされた回数もカウントします。私はSafariでこのコードをビルドしてテストしていましたが、問題はありませんでした。Safariでも期待どおりに動作します。ただし、ChromeとIEでは機能しません（他のブラウザはテストしていません）。

私は通常HTML5Boilerplateを使用していましたが、ここに表示できるようにコードを減らしました（このバージョンも機能しません）。

以下のページのコードを示しました。すべてのブラウザで動作させるにはどうすればよいですか。ブラウザで動作が異なる理由は何ですか？

前もって感謝します

<!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コンソールを使用してエラーを監視することを忘れないでください。この場合、次を返します。

Uncaught TypeError：オブジェクト＃のプロパティ'images'は関数ではありません

あなたが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 に答える