2012-04-28 13 views
2

だから私はJavaScriptを学ぼうとしています。私はいくつかのチュートリアルやガイドを見てきましたが、しばしば彼らはあなたにウェブページを扱うためのJavaScriptを書く方法を教えていません。基本的なjavascriptがうまく動作しない問題[noob here]

私がやりたいことは、私が最近作ったウェブサイトとの基本的な対話性を提供することです。それらには動的コンテンツが含まれていますが、私はまだjavascriptのインタラクティビティの一部を望みます。しかし、私の試みはすべて役に立たず、何も役に立たない。私の最終的な目標は、私のウェブサイトをもっとプロフェッショナルにすることです。おそらく、node.jsサーバーを立ち上げて、いくつかのajaxやwebsocketを使ってキャンバスを使って2dゲームを構築することもありますが、それはずっと後であります。

次のコードは、私が読んだいくつかのHTML DOMチュートリアルに基づいて書いた基本的なものです。問題はそれがまったく機能しないことです。だから誰も私がここで何が起こっているのか、それがなぜ全くうまくいかないのか教えてもらえませんか。そしてはい、私はブラウザでJavaScriptを有効にしています。あなたがgetElementByIdを使用しているとid pとどの要素ではありませんのでです

<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> 
+0

JFGI:

我々は両方の質問と回答で作業のデモを示すのが好き。 http://www.google.com/insidesearch/tipstricks/ – iambriansreed

+0

「うまくいかない」などのエラーはありません。あなたはそれが1つのことをすると予想しました。それは他のことをしましたが、あなたは私たちにどちらかを教えてくれませんでした。 – stark

+0

@isANoob http://www.codecademy.comをご覧ください。それは本当にあなたに行くでしょう。 – iambriansreed

答えて

6

。代わりにgetElementsByTagNameを使用して、すべてのp要素を取得します。

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

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

javascriptを学ぶ上での答えは、さまざまなオブジェクトのメソッドに慣れてきていますか?これまでのところC++のような感じがしていますし、C++の経験もありますが、それは私がうまく動作しているようです。 – Hallucigenia95

+0

はい、最初は圧倒的に思えるかもしれませんが、DOM、DOMのトラバーサルと操作のアクセス/検索の基本を学ばなければなりません。ここに良い参考資料があります。http://javascript.info/tutorial/searching-elements-dom#methods –

+0

@isANoob、javascriptはメソッド名を学習するのではなく、何をしているのかについてです。それはAPI(この場合はDOM API)の学習と呼ばれ、DOMで遊びたい場合に必要なことです。新しいAPIを学ぶことは、実際に何かを構築するために使用しようとする言語を使ってできることを望んでいるでしょう。 javascriptを学ぶことは、とりわけクロージャ、オブジェクト、スコープなどについて学習することです。 – bmceldowney

3

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

  1. ページが読み込まれる前にJavaScriptが実行されるとき。

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

  3. あなたが何かできることの数。

平野のJavaScript:あなたのコードで

私はあなたがgetElemenysByTagName('p')を使用することができ、あなたはすべての<p>タグにアクセスしようとしていると仮定しています。

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

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

要素の選択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/

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> 
関連する問題