要素のターゲットを見つける

Question

私はかなり長い間答えを探していましたが、完全な解決策は見つかりませんでした。私は良い条件で検索したかどうか分からない。ここでは、要素をターゲットにしてテキストを変更したいと考えています。今、私は、要素ごとに1つの関数を使用しますが、それはかなりの繰り返しですので、ここでの例です：

HTML

<p id="p1" onClick="change1()">Hello</p> 
<p id="p2" onClick="change2()">My name is Ben</p> 
<p id="p3" onClick="change2()">Good Bye</p> 

はJavaScript

function change1() { 
    var test = prompt('Enter new text here'); 
    document.getElementById('p1').innerHTML = test; 
} 
function change2() { 
    var test = prompt('Enter new text here'); 
    document.getElementById('p2').innerHTML = test; 
} 
function change3() { 
    var test = prompt('Enter new text here'); 
    document.getElementById('p3').innerHTML = test; 
} 

それでは、私は、ユーザーを許可されてやっています"p"要素のテキストを変更します。しかし、あなたが見ることができるように、ページ上の100要素の機能を繰り返す必要がある場合、時間がかかることがあります。 event.targetなどを使用してクリックした「p」要素の「id」を探して、プロンプトボックスの値を入力する方法はありますか？私はこれらの繰り返しをすべて防ぐ汎用関数がほしいと思います。

ボーナスは、すべてのp要素に適用可能な各要素（$（ 'p'）。click ...のようなもの）で "onclick"を使用しないことです。

私はJQueryのないJavaScriptを好むだろうが、それがはるかに単純なら、私はそれを使用する。

ありがとうございます！

Answer 1

onclick属性内では、thisが対象です。関数に引数として渡すことができます。

function change(element) { 
 
    var test = prompt('Enter new text here'); 
 
    element.innerHTML = test; 
 
}

<p id="p1" onClick="change(this)">Hello</p> 
 
<p id="p2" onClick="change(this)">My name is Ben</p> 
 
<p id="p3" onClick="change(this)">Good Bye</p>

Answer 2

jqueryを使用する場合、私の意見では、あなたはもっと簡単に努力します。あなたがgetElementByTagを使用して、ためを反復処理しなければならない、それがなければ

$('[id=^p]').on('click', function(obj) { 
    var test = prompt('Enter new text here'); 
    var n = test.length; 
    if(n > 0) 
     obj.html(test); 
}); 

：これを見てください。あなたはそれを行うことができますが、jqueryは実際にここで時間を節約します。

このソリューションを使用すると、HTMLにコードを必要としないため、ビューレイヤーとビジネスレイヤーの分離を改善できます。