こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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";
}
}

==========================

投稿日時 - 2014-04-22 22:05:52

QNo.8565080

暇なときに回答ください

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

こういうではダメですか?

[].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) ? '表示' : '隠す'
}

投稿日時 - 2014-04-23 14:48:59

ANo.1

簡単なことを難しく書いているのか?
それとも私がそれをしているのか。

<!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>

投稿日時 - 2014-04-23 14:21:44

あなたにオススメの質問