人に聞けない痔の悩み、これでスッキリ >>

DOM初心者です。
今、簡単なショップシステムをつくっていますがjavaScriptが思ったように動作せず困っています。
取りあえず、下のHTMLを見て下さい。
<div id="menu" >
<div class="product">
<img src="cheesecake.jpg" />
<button onClick="addToCart()">カートへ</button>
</div>
</div>
<div id="cart">
</div>

このbuttonをクリックすると下の、<div id="cart">内に<div class="product">が丸ごと追加されると言う意図で下のコードを書きました。
function addToCart() {
var cartEl = document.getElementById("cart");
  var productDiv = this.parentNode;
cartEl.appendChild(productDiv);
}
しかし、全く反応しません。
しかも、alert(productDiv);はundifindと表示されます。おそらくthisに関して勘違いしているのかparentNodeの問題かと思うのですが、お手上げでした。
明らかに、勘違いしているかもしれませんが、お手柔らかに説明をお願いします。
また、良い解説サイトが有れば教えて下さい。

このQ&Aに関連する最新のQ&A

A 回答 (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と他のブラウザで仕様が違う)
    • good
    • 0
この回答へのお礼

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

お礼日時:2010/04/02 00:13

×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>
の中身はクリックする前に出来上がってないとだめです。

良い解説サイトが有れば教えて下さい。
=>ここです。

参考URL:http://oshiete1.goo.ne.jp/c254.html
    • good
    • 0
この回答へのお礼

素早い回答有り難うございます。
srcElementなんてプロパティが有る事は知らなかったです。。

確かにここが一番早く解決します。また、質問すると思うのでその時はお願いします。

お礼日時:2010/04/02 00:18

thisではなく、


var productDiv = document.getElementById("cart").parentNode;
ではないでしょうか。

また、これで取得される parentNode は <body>タグになりますよ。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング