JavaScriptでショップシステムを作成しているが、buttonが反応しない問題について

2010/04/01 17:37

このQ&Aのポイント

JavaScript初心者がショップシステム作成中。buttonが反応せず困っている。
buttonをクリックしても商品が追加されず、thisやparentNodeに問題がある可能性。
解説サイトを探している。引き続き助言を求める。

amcars
お礼率77% (21/27)

JavaScript
回答数3
ありがとう数4

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2010/04/01 18:27 回答No.3

function内で、alert(this)としてみれば[Object]とか[Object Window]とか返ってくると思いますが… ついでに、 var key, m=''; for (key in this) m += ', ' + key; alert(m); などとしてみると、ブラウザによって返ってくる内容がかわります。とりあえずの（簡単な）対処としては、呼び出し側で　onClick="addToCart(this)"　としておいて　　　　　　　　（↑このthisは要素になる） function addToCart(elm) { var cartEl = document.getElementById("cart"); cartEl.appendChild(elm.parentNode); } とすれば、その要素が移動します。移動させずに（もとの要素を残したまま）、複製を作りたいのであれば、 function addToCart(elm) { var cartEl = document.getElementById("cart"); cartEl.appendChild(elm.parentNode.cloneNode(true)); } みたいな感じ。イベントをaddEventListenerなどで登録すれば、イベントハンドラーを取得できるので、#2様がご提示の方法で要素を取得することが可能です。(このあたり、IEと他のブラウザで仕様が違う）

質問者

お礼 2010/04/02 00:13

回答有り難うございます。問題なく動きました。なるほど、因数に渡せばよいのですね。。完全に予想外です。 cloneNode(true)も使う所が有りそうなので、メモしときますね。助かりました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

yyr446
ベストアンサー率65% (870/1330)

2010/04/01 18:12 回答No.2

×var productDiv = this.parentNode; 間違いです。クリックされた要素の親は、 function addToCart(e) { var cartEl = document.getElementById("cart"); //　　var productDiv = this.parentNode; var t= (e.srcElement || e.target); var productDiv =t.parentNode; cartEl.appendChild(productDiv); } となります。あと、 <div id="cart"> </div> の中身はクリックする前に出来上がってないとだめです。良い解説サイトが有れば教えて下さい。＝＞ここです。