2

だから私はjavascriptを学ぼうとしています。いくつかのチュートリアルとガイドを見てきましたが、多くの場合、Web ページを操作するための JavaScript の書き方を教えてくれません。

私が学びたいのは、最近作成した Web サイトで基本的なインタラクティブ機能を提供することです。それらには動的コンテンツが含まれていますが、JavaScript の対話機能が必要です。ただし、何も機能しないため、私の試みはすべて無駄でした。私の最終的な目標は、ウェブサイトをよりプロフェッショナルに感じさせることです。また、いくつかの ajax または websocket を使用して node.js サーバーを稼働させて、キャンバスで 2D ゲームを構築することもできますが、それはずっと後のことです。

次のコードは、私が読んだいくつかの HTML DOM チュートリアルに基づいて作成した基本的なものです。問題は、それがまったく機能しないことです。では、ここで何が起こっているのか、なぜまったく機能しないのか、誰か教えてください。はい、ブラウザで JavaScript をオンにしています。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>
    <p>SomeText</p>
    <script type="text/javascript">
        var ptag = document.getElementById('p');

        function alertclick() {
            alert(this);
        }

        for (i = 0; i < ptag.length; i++){
            var attach = ptag[i];
            attach.addEventListener("click", alertclick, false);
        }


    </script>
</body>
</html>
4

3 に答える 3

6

これは、使用getElementByIdしていて、 id を持つ要素がないためですp。代わりgetElementsByTagNameに、すべてのp要素を取得するために使用します。 

var ptags = document.getElementsByTagName('p');

for (var i = 0; i < ptags.length; i++){
     var element = ptags[i];
     element.addEventListener("click", alertclick, false);
}
于 2012-04-28T01:38:42.247 に答える
3

初心者としてあなたを捕まえるいくつかのことがあります。

  1. ページが読み込まれる前に JavaScript が実行された場合。

  2. ページに JavaScript ファイルを含める順序は重要です。

  3. 何かを実行できる方法の数。

プレーンな JavaScript:

あなたのコードでは、すべての<p>タグにアクセスしようとしていると仮定していますgetElemenysByTagName('p').

単一の要素にアクセスしたい場合は、それに ID を割り当ててから を<p id="me">SomeText</p>使用することをお勧めしますgetElementsById('me')。

一連の要素にアクセスしたくないが、特定のタイプのすべてにアクセスしたくない場合は、クラスを適用する必要があります<p class="group">SomeText</p>...使用できますgetElementsByClassName('group')が、最新のブラウザーでのみサポートされています。

要素の選択については、jQuery を使用することを強くお勧めします。jQuery を使用すると、プロセスがはるかに簡単で柔軟になります。http://jquery.com/

jQuery:

jQuery を使用すると、次のように要素にアクセスできます。

$('#me'); //Individual Element by ID
$('.group'); //Group of elements by Class
$('<p>'); //All P elements

jQuery は、シンプルでブラウザー間の互換性があるため、イベント ハンドラーを作成する場合にも非常に適しています。onClick の場合:

http://api.jquery.com/click/

于 2012-04-28T01:40:13.050 に答える
3

少し自信を持ってください！あなたはほとんどそこにいます。これがあなたが望んでいると私が理解した動作です: 段落をクリックしてその内容を警告します。

質問と回答の両方で動作するデモを表示するのが好きです: http://jsfiddle.net/bxvny/

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>
    <p>SomeText</p>
    <p>SomeText2</p>
    <p>SomeText3</p>
    <script type="text/javascript">
        var ptag = document.getElementsByTagName('p');

        function alertclick() {
            alert(this.innerHTML);
        }

        for (i = 0; i < ptag.length; i++){
            var attach = ptag[i];
            attach.addEventListener("click", alertclick, false);
        }


    </script>
</body>
</html>
于 2012-04-28T01:42:28.140 に答える