The event handler will be passed an event object, which exposes the
currentTarget[
^] property representing the element which raised the event.
The only problem is knowing which label to display in front of the name. But you can get around that by using another element to hold the name:
<p class="player">Player 1: <span class="name">Chris</span></p>
<p class="player">Player 2: <span class="name">Fred</span></p>
var para = document.querySelectorAll('p.player');
for (var i = 0; i < para.length; i++){
para[i].addEventListener('click', updateName);
}
function updateName(e) {
var p = e.currentTarget;
var label = p.querySelector('span.name');
var name = label.innerText;
name = prompt('Enter a new name', name);
if (name) {
label.innerText = name;
}
}
Demo[
^]