- 締切済み
EventListener による関数呼び出し
GMのスクリプトで、ボタンクリックにより、任意の テキストの非表示を切り替える機能に取り組んでいます。 端的な質問内容は下記の『問題点』に記していますが、 根本的な実装方法が適当でないという可能性もあると 思いますので、すべてのコードと、目的の機能について 順に説明させていただきます。 『目的の機能』 GMのスクリプトで、ボタンクリックにより、任意の テキストの非表示を切り替える 『実装方法』 具体的な方法としては以下のような内容です。 ・ページ内にランダム数ある <pre> タグ数を xpath の snapshotLengh で得る ・ループで各 <pre> タグの直前に、<form> を追記する ・ループで各 <pre> タグを <div id="dispX"> で囲む // タグ追記後の HTML // <form> <input type="button" value="Display"> <input type="button" value="UnDisplay"> </form> <div id="disp1"> <pre> テキスト </pre> </div> ...... <form> <input type="button" value="Display"> <input type="button" value="UnDisplay"> </form> <div id="disp2"> <pre> テキスト </pre> </div> ・クリックにより eventListener で関数を呼び出して、そのときの 引数が 0 と 1 で style.display = "block" と "none" を切り替える ・切り替える対象は document.getElementById("dispX") で得る ※ここが問題 『現在期待通りに動作している部分』 タグの追加は期待通りに動作している。 EventListener の引数は、Dispaly クリック時に 0 Undispaly クリック時に 1 が関数 hyoji() に渡されており、期待通り。 『問題点』 以下のEventListener において、 i = 1 のとき、document.getElementById にて disp1 を対象として得たい。 同様に、i = 2 のときは disp2 を対象として得たい。 しかしながら、現在のコードでは(当然ですが。。） i の値に寄らず、getElementById で得られる対象は disp に固定されてしまっている。 eval("addInputUndisplay"+i+".addEventListener('click',function(){hyoji(1);}, false);"); function hyoji(num) { if (num == 0) { document.getElementById("disp").style.display = "block"; } else { document.getElementById("disp").style.display = "none"; } } 上記問題点を解決できるような EventListener の使い方や、別の実装方法のヒントなどが ありましたらご教示いただけないでしょうか。 宜しくお願い致します。 ==================== GM の全ソースコード ==================== var i, num; var allObj = document.evaluate("//pre", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (i = 0; i < allObj.snapshotLength; i++){ // Adding <div id="disp"> before target <pre> tag var range = document.createRange(); var newNode = document.createElement("div"); eval("var addId"+i+"= document.createAttribute('id');"); eval("addId"+i+".nodeValue = 'disp"+i+"';"); eval("newNode.setAttributeNode(addId"+i+");"); var thisObj = allObj.snapshotItem(i); range.selectNode(thisObj); range.surroundContents(newNode); var addForm = document.createElement("form"); // Display Button eval("var addInputDisplay"+i+"= document.createElement('input');"); var addTypeDisplay = document.createAttribute("type"); addTypeDisplay.nodeValue = "button"; var addValueDisplay = document.createAttribute("value"); addValueDisplay.nodeValue = "Display"; eval("addInputDisplay"+i+".setAttributeNode(addTypeDisplay);"); eval("addInputDisplay"+i+".setAttributeNode(addValueDisplay);"); eval("addInputDisplay"+i+".addEventListener('click',function(){hyoji(0);}, false);"); // Undisplay Button eval("var addInputUndisplay"+i+" = document.createElement('input');"); var addTypeUndisplay = document.createAttribute("type"); addTypeUndisplay.nodeValue = "button"; var addValueUndisplay = document.createAttribute("value"); addValueUndisplay.nodeValue = "UnDisplay"; eval("addInputUndisplay"+i+".setAttributeNode(addTypeUndisplay);"); eval("addInputUndisplay"+i+".setAttributeNode(addValueUndisplay);"); eval("addInputUndisplay"+i+".addEventListener('click',function(){hyoji(1);}, false);"); // Adding buttons newNode.parentNode.insertBefore(addForm, newNode); eval("addForm.appendChild(addInputDisplay"+i+");"); eval("addForm.appendChild(addInputUndisplay"+i+");"); } function hyoji(num) { if (num == 0) { document.getElementById("disp").style.display = "block"; } else { document.getElementById("disp").style.display = "none"; } } ==========================
- jussmen_1979
- お礼率85% (12/14)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- b0a0a
- ベストアンサー率49% (156/313)
こういうではダメですか？ [].forEach.call(document.getElementsByTagName('pre'), function (elem) { elem.outerHTML = '<button onclick=disp(this)>隠す</button>' + elem.outerHTML }) function disp(bt) { var pre = bt.nextElementSibling bt.textContent = (pre.hidden = !pre.hidden) ? '表示' : '隠す' }
- babu_baboo
- ベストアンサー率51% (268/525)
簡単なことを難しく書いているのか？ それとも私がそれをしているのか。 <!DOCTYPE html> <title></title> <pre>ぷり</pre> <pre class="add_ctrl">ぷり</pre> <pre>ぷりぷり</pre> <pre class="add_ctrl">ぷりぷりぷり</pre> <pre>ぷりぷりぷりぷり</pre> <pre class="add_ctrl">ぷりぷりぷりぷりぷり</pre> <script> var inp0 = document.createElement ('input'); inp0.type = 'button'; inp0.value = 'Display'; var inp1 = inp0.cloneNode (false); inp1.value = 'UnDisplay'; var p = document.createElement ('p'); var form = document.createElement ('form'); var div = document.createElement ('div'); div.style.display = 'none'; p.appendChild (inp0); p.appendChild (inp1); form.appendChild (p); var pre = document.querySelectorAll ('pre.add_ctrl'); var e, i; for (i = 0; e = pre[i]; i++) { var d = div.cloneNode (false); var f = form.cloneNode (true); e.parentNode.insertBefore (d, e); d.appendChild (e); d.parentNode.insertBefore (f, d); } //___ function clickHandler (event) { var e = event.target; var div; if ('INPUT' === e.nodeName) if ('button' === e.type) { div = e.parentNode.parentNode.nextElementSibling; switch (e.value) { case 'Display' : div.style.display = 'block'; break; case 'UnDisplay' : div.style.display = 'none'; break; } } } document.addEventListener ('click', clickHandler, false); </script>
