Amazingman1 Ответов: 2

Как использовать функцию множественного переименования с помощью javascript.

I'm new to Javascript and I've only recently learned HTML and CSS. So, example, in this example;
  <body>
    <p>Player 1: Chris</p>

    <script>
      var para = document.querySelector('p');
      para.addEventListener('click', updateName);
      function updateName() {
        var name = prompt('Enter a new name');
        para.textContent = 'Player 1: ' + name;
      }
    </script>

The given Javascript can only change "Player 1: Chris". If I have to add "Player 2: Adam" the same script doesn't work. What modifications do I have to use?


Что я уже пробовал:

<body>
   <p>Player 1: Chris</p>

   <script>
     var para = document.querySelector('p');
     para.addEventListener('click', updateName);
     function updateName() {
       var name = prompt('Enter a new name');
       para.textContent = 'Player 1: ' + name;
     }
   </script>

2 Ответов

Рейтинг:
1

Richard Deeming

Обработчику событий будет передан объект события, который предоставляет currentTarget[^] свойство, представляющее элемент, вызвавший событие.

Единственная проблема заключается в том, чтобы знать, какая метка должна отображаться перед именем. Но вы можете обойти это, используя другой элемент для хранения имени:

<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;
    }
}
Демонстрация[^]

Рейтинг:
0

A_Griffin

Вам нужно добавить идентификаторы к элементам и выбрать их соответствующим образом

<p id="p1">Player 1: Chris</p>
  <p id="p2">Player 2: Fred</p>
<script>
 var p1 = document.getElementById("p1");
 var p2 = document.getElementById("p2");
 p1.addEventListener('click', updateName1);
 p2.addEventListener('click', updateName2);
      function updateName1() {
        var name = prompt('Enter a new name');
        p1.textContent  = 'Player 1: ' + name;
      }	
      function updateName2() {
        var name = prompt('Enter a new name');
        p2.textContent  = 'Player 2: ' + name;
      }	
</script>
Я уверен, что с небольшой изобретательностью вы могли бы объединить две функции слушателя в одну и передать переменную....