- ベストアンサー
JavaScriptでショップシステムを作成しているが、buttonが反応しない問題について
- JavaScript初心者がショップシステム作成中。buttonが反応せず困っている。
- buttonをクリックしても商品が追加されず、thisやparentNodeに問題がある可能性。
- 解説サイトを探している。引き続き助言を求める。
- amcars
- お礼率77% (21/27)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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なんてプロパティが有る事は知らなかったです。。 確かにここが一番早く解決します。また、質問すると思うのでその時はお願いします。
関連するQ&A
- classList で、class名が付かない。
classList を使用して、新規で div タグに class 名を付けようと思っています。 div に id 名を付け、それを対象とした場合は、class 名は付きますが、 id名を含めない タグのみでは、class 名は付かないのでしょうか? コードは以下記述の通りです。 ご回答どうぞよろしくお願いいたします。 <html> <head></head> <body> <div id="hoge">class-name on tag.</div> <script> var dom = document.getElementById( 'hoge' ); //以下のように使えるなら理想です。 //var dom = document.getElementByTagName( 'div' ); dom.classList.add( 'test' ); </script> </body> </html>
- ベストアンサー
- JavaScript
- onclickを使わずにクリック元を特定したい
onclickを使えばクリック元の位置を判断することができますが、 onclickばかりが並ぶのはよろしくないとききました。 そこで、イベントリスナーを使うことにしました。 しかし、onclickを使わずに位置を特定することができません。 サンプルではthis.targetで取得できないか試してみましたが t.style.backgroundColorでtの部分でエラーになります。 onclickを使わずにクリック元を特定する方法はないでしょうか。 <div id="id"> <div id="sample129" class="cn"> <div>～</div> <div>～</div> </div> <div id="sample128" class="cn"> <div>～</div> <div>～</div> </div> ～1まで続く～ <div id="sample1" class="cn"> <div>～</div> <div>～</div> </div> </div> <script type="text/javascript"> var dom = document.getElementById('id'); var cds = dom.childNodes; if(cds[1].className=="cn"){ cds[1].addEventListner('click',fg(this.target),false); } function fg(t) { t.style.backgroundColor = "#000000"; var url = "http://test/" + t.id + "/"; window.open(url); } </script>
- ベストアンサー
- JavaScript
- Apend前のElementの中のElement
var div = document.createElement('div'); div.innerHTML="hogehoge<div id='hoge'>aaa</div>"; とし、 このdivの中のelementをID指定で取得したいです。 document.body.appendChild(div); とした後なら、 document.getElementById('hoge') で取得できるのですが、 appendChildしたくないです。 ご名案ありましたら、ご教授ください。宜しくお願いいたします。
- ベストアンサー
- JavaScript
- 要素を指定の場所に追加
お世話になります。 createElementした要素を指定の場所に追加したいのですが どのようにすればよろしいでしょうか？ <HTML> <HEAD> <script type="text/javascript"> function add(id){ var dummy = document.createElement ("SPAN"); var str = document.createTextNode("ダミー"); dummy.appendChild(str); document.getElementById(id).appendChild ( dummy ); } </script> </HEAD> <BODY> <div id="top"> <div id="id_1">ほげ１</div> <div id="id_2">ほげ２</div> </div> <br><br> <input type="button" value=copy onClick="add('id_1')"> </BODY> </HTML> ・appendChild前 <div id="id_1">ほげ１</div> <div id="id_2">ほげ２</div> ・実現したい形 appendChild後(id_1の後に追加する。) <div id="id_1">ほげ１</div> <span>ダミー</span> <div id="id_2">ほげ２</div> ・現状(id_1のdivの中に追加される。) <div id="id_1">ほげ１ <span>ダミー</span></div> <div id="id_2">ほげ２</div> もしかしたらすごく簡単なことなのかもしれませんが、 ご教授よろしくお願いいたします。
- ベストアンサー
- JavaScript
- createElementが一瞬で消えてしまいます
<script type="text/javascript"> <!-- function check(){ if(document.loginform.user.value==""){ var element1=document.createElement("span"); element1.innerHTML="Usernameを入力してください。"; element1.className="error0"; var ojbody1=document.getElementById("titlerror1"); ojbody1.appendChild(element1); false; } if(document.loginform.pass.value==""){ var element2=document.createElement("span"); element2.innerHTML="Passwordを入力してください。"; element2.className="error0"; var ojbody2=document.getElementById("titlerror2"); / ojbody2.appendChild(element2); false; } } // --> </script> <title>ログインページ</title> </head> <body> <div id="error"><font color="red"><?=$error?></font></div> <div id="loginform"> <form id="loginform" name="loginform" action="index.php" method="post"> <fieldset> <p> <div class="titlerror" id="titlerror1"> <label for="user">User Name <span class="hankaku">(半角英数字)</span></label><br /> </div> <input type="text" name="user" value="" id="user" text-align="middle"> </p> <p> <div class="titlerror" id="titlerror2"> <label for="pass">Password <span class="hankaku">(半角英数字)</span></label><br /> </div> <input type="password" name="pass" value="" id="pass" > </p> <div id="submit"> <p class="submit"> <button type="submit" name="login" value="login" class="button" id="login" onclick="check()"><img src="submit.png" border="0" alt="login" /></button> </p> </div> </fieldset> </form> </div> </body> javascript初心者です。 これを実行するとつくられたタグが一瞬だけ表示して消えてしまいます。（CSSを付けると） 上記は表示すらしません。 どこが間違っているか、なぜそうなのかを教えていただけると助かります。 お願いします。
- ベストアンサー
- JavaScript
- 指定位置に要素を追加する
<script type="text/javascript"> function test(){ var hako2 = document.createElement('div'); hako1.innerHTML = "TEST2"; var lk2 = document.getElementById('link2'); var li2 = lk2.parentNode; li2.appendChild(hako2); } </script> </head> <body> <div><a href="1" id="link1">1</a></div> <div><a href="2" id="link2">2</a></div> <div><a href="3" id="link3">3</a></div> <input type="button" onclick="test()" value="test"> </body> みたいなイメージなのですが、いかんせんスマートじゃありません できれば<div>で<a>を囲うのをやめたいのです。 ターゲットになる<a>の位置は固定ではなく前後に他の要素が入ることもあります <a href="2" id="link2">2</a>の次に<div>TEST2</div>を生成できればどんなのでも？いいのですが、何かいいやり方ありませんか？
- ベストアンサー
- JavaScript
- javascript ボタンを非表示にしたい
javascriptを学習しています。 3回目以降は追記できないようにしましたが、ボタンを非表示に出来ておりません。 どなたかご教授お願いいたします。 <!DOCTYPE html> <html> <head> <title>アカウント登録</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="base container"> <div class="row"> <h1>アカウント登録</h1> </div> <div class="row"> <div class="card" id="card"> <div class="card-block"> <form id="form-area" class="form-inline" method="post"> <div class="form-group"> <div class="input-group"> <input id="namae" name="namae" type="text" class="form-control" placeholder="名前"> </div> </div> <div class="form-group"> <div class="input-group"> <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム"> </div> </div> <div class="form-group"> <input id="tuikaBtn" type="button" name="touroku" value="追加"> </div> <table id="result-table"> <thead> <tr> <th>名前</th> <th>ニックネーム</th> <th>削除</th> </tr> </thead> </table> </form> <div id="tuikaMoto"> </div> <div id="result"></div> </div> </div> </div> </div> </div> <div id="overLay"> </div> <script> class NameTable { constructor() { this.data = []; this.table = document.getElementById('result-table'); this.tbody = this.table.createTBody(); this.btn = document.getElementById("tuikaBtn"); this.input_namae = document.getElementById("namae"); this.input_nickname = document.getElementById("nickname"); } handleEvent(e) { if (e.target === this.btn) { const name_value = this.input_namae.value, nickname_value = this.input_nickname.value; if (this.checkTsuika(name_value, nickname_value)) { this.pushData(name_value, nickname_value); this.createTable(); }; } else if (e.target.matches('.del')) { this.clickDel(e.target); } } pushData(name, nickname) { /* DBなどに追加する場合は、ここでfetchなどで通信 */ this.data.push({ name: name, nickname: nickname }); window.alert(`「[${name}]さん[${nickname}]にて登録しました。」`); this.input_namae.value = ''; this.input_nickname.value = ''; if (this.data.length > 2) { Object.assign(this.btn, { value: '', disabled: true, }); } } createTable() { while (this.tbody.firstChild) { this.tbody.removeChild(this.tbody.firstChild); } this.data.forEach(d => { const tr = this.tbody.insertRow(-1); tr.insertCell(0).appendChild(document.createTextNode(d.name)); tr.insertCell(1).appendChild(document.createTextNode(d.nickname)); const input_del = document.createElement('input'); Object.assign(input_del, { type: 'button', value: '削除', className: 'del', }); tr.insertCell(2).appendChild(input_del); }); } checkTsuika(name, nickname) { if (name === "" || nickname === "") { return false; } return window.confirm(`「[${name}]さん[${nickname}]を登録します。よろしいですか？」`); } clickDel(target) { /* fetchなどで削除を送信 */ const dels = [...this.tbody.querySelectorAll('.del')]; this.data = this.data.filter((_, i) => dels[i] !== target); this.createTable(); Object.assign(this.btn, { value: '追加ボタン', disabled: false, }); } } // 実行 window.addEventListener('DOMContentLoaded', () => { const table = new NameTable(); document.addEventListener('click', table, false); }); </script> </body> </html>
- 締切済み
- JavaScript
- DOMで作ったラジオボタンが選択できない
JavaScript DOM で作成したラジオボタンが選択できません。 Sleipnirの「選択部分のソースを表示」で確認したところ、 name属性だけがセットされていないようで、選択できない原因はそれだと思いますが、 セットできない理由が分かりません。 どなたか解決策を教えて頂けないでしょうか。 なお、下記の何れの方法でもダメなようです。 obj.name = "hogehoge" obj.setAttribute("name", "hogehoge"); 念のため、現象確認用のソースも貼っておきます。 <html> <head> <script type="text/javascript"> function create1() { var rObj = document.createElement("input"); rObj.type = "radio"; rObj.name = "rd"; rObj.value = 5; var divObj = document.getElementById("box"); divObj.appendChild(rObj); } function create2() { var rObj = document.createElement("input"); rObj.setAttribute("type", "radio"); rObj.setAttribute("name", "rd"); rObj.setAttribute("value", "3"); var divObj = document.getElementById("box"); divObj.appendChild(rObj); } </script> </head> <body> <input type="button" value="create1" onClick="create1()"> <input type="button" value="create2" onClick="create2()"> <div id="box"></div> </body> </html>
- ベストアンサー
- JavaScript
- scriptに関して
scriptで下記のようにcheckboxと削除ボタンを作りました。 checkをした行を削除ボタンで削除をしたいのですが、 今のソースの状態では、checkboxを押した瞬間に行が消えます。 どこの書き方がいけないのでしょうか？ <scriptソース> function AddTableRows1(){ var table1 = document.getElementById("table1"); var row1 = table1.insertRow(table1.rows.length); var cell1 = row1.insertCell(0); var cell2 = row1.insertCell(1); var cell3 = row1.insertCell(2); cell1.setAttribute("class","name"); cell2.setAttribute("class","naiyo"); cell3.setAttribute("class","zyoukyou"); var HTML1 = '<input type="checkbox" onclick="remove_row(this)"><input name="gyoumuname" ID="gyoumuname" type="text" ><input type="hidden" name="gyoumuno" Id="gyoumuno" value="0">'; var HTML2 = '<textarea name="gyoumunaiyo" ID="gyoumunaiyo" Style="width:50em;height:5em"></textarea>'; var HTML3 = '<input name="gyoumuzyoukyou" ID="gyoumuzyoukyou" >'; cell1.innerHTML = HTML1; cell2.innerHTML = HTML2; cell3.innerHTML = HTML3; } function remove_row(o){ var TR = o.parentNode.parentNode; TR.parentNode.deleteRow(TR.sectionRowIndex); } <ボタンソース> <input class="btn1" type="button" value="削除" onclick="remove_row(this)">
- ベストアンサー
- JavaScript
- appendChildでのデフォルト値
お世話になってます。 下記のようにスクリプトを書いてますが、思ったとおりにいかず 困っています。 やりたいのは ボタンとドロップダウンが一つずつあり、ボタンを押すたびに ドロップダウンのコピーが作成されていくという動きです。 ここで、作成するドロップダウンの初期値(例えばBBB)を指定することは できないのでしょうか？ テキストボックスではVALUEもコピーされたので、できそうな 気はするのですが・・・ 以上、宜しくお願いします。 ※ソース載せておきます。 <html> <head> <script> function AddLine(AddID,CpyID){ var nodAddNode; // var nodCpyRoot; // var nodCounter; // var nodCpyNode; // nodAddNode = document.getElementById(AddID); nodCpyRoot = document.getElementById(CpyID); nodCpyNode = nodCpyRoot.cloneNode(true); nodAddNode.appendChild(nodCpyNode); } </script> </head> <body> <INPUT TYPE="BUTTON" CLASS="cbtnFourChar" VALUE="add" onclick="AddLine('aaa','CDKUBN');focus();"> <br /> <br /> <div id="bbb"> <div id="aaa"> <SELECT name="CDKUBN" id="CDKUBN"> <OPTION VALUE=""></OPTION> <OPTION VALUE="3" SELECTED>AAA</OPTION> <OPTION VALUE="5">BBB</OPTION> </SELECT> </div> </div> </body> </html>
- ベストアンサー
- Visual Basic
お礼
回答有り難うございます。 問題なく動きました。なるほど、因数に渡せばよいのですね。。完全に予想外です。 cloneNode(true)も使う所が有りそうなので、メモしときますね。 助かりました。