- ベストアンサー
JavaScriptでショップシステムを作成しているが、buttonが反応しない問題について
- JavaScript初心者がショップシステム作成中。buttonが反応せず困っている。
- buttonをクリックしても商品が追加されず、thisやparentNodeに問題がある可能性。
- 解説サイトを探している。引き続き助言を求める。
- amcars
- お礼率77% (21/27)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （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と他のブラウザで仕様が違う）
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
×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> の中身はクリックする前に出来上がってないとだめです。 良い解説サイトが有れば教えて下さい。 ＝＞ここです。
お礼
素早い回答有り難うございます。 srcElementなんてプロパティが有る事は知らなかったです。。 確かにここが一番早く解決します。また、質問すると思うのでその時はお願いします。
thisではなく、 var productDiv = document.getElementById("cart").parentNode; ではないでしょうか。 また、これで取得される parentNode は <body>タグになりますよ。
お礼
回答有り難うございます。 問題なく動きました。なるほど、因数に渡せばよいのですね。。完全に予想外です。 cloneNode(true)も使う所が有りそうなので、メモしときますね。 助かりました。