Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Почему обработчик работает один раз? (https://javascript.ru/forum/misc/79193-pochemu-obrabotchik-rabotaet-odin-raz.html)

gunner17 02.01.2020 22:41
Почему обработчик работает один раз?
 
Всем привет, помогите чайнику в азах js))
есть код, почему addEventListener работает только один раз? объясните
let div=document.createElement('div');
document.body.append(div);
div.innerHTML='sdkjbfsdbf';
let divId=1;
div.id=String(divId);

function func(){
let fDiv=document.getElementsByTagName('div');
console.log(fDiv);
fDiv[0].addEventListener('click', function(){
fDiv[0].remove();
divId++;
let div=document.createElement('div');
document.body.append(div);
div.id=String(divId);
// func(); ВОТ если функцию вызывать то сработает много раз)


});
}
func();

рони 02.01.2020 23:00
gunner17,
у вас функция назначает клик диву который уже есть, а не второму добавленному.

рони 02.01.2020 23:24
gunner17,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони 02.01.2020 23:24
gunner17,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  @import url('https://fonts.googleapis.com/css?family=Stoke&display=swap');
  div {
     border: 1px dashed Gray; padding: 5px;
     height: 100px;
     width: 100px;
     display: flex;
     align-items: center;
     justify-content: center;
  }
  div:after{
      content: attr(id);
      text-align: center;
      font: 900 4.3em / 53px "Stoke", sans-serif;
  }

  </style>


</head>
<body>
<script>
let divId = 1;
let fDiv = document.getElementsByTagName('div');

(function func() {
    if (fDiv[0]) fDiv[0].remove();
    let div = document.createElement('div');
    document.body.append(div);
    div.id = String(divId);
    divId++;
    fDiv[0].addEventListener('click', func);
})()
</script>
</body>
</html>

Malleys 02.01.2020 23:57
рони, вместо…
display: flex;
align-items: center;
justify-content: center;


в данном случае можно и так…
display: grid;
place-content: center;


https://caniuse.com/#search=place-content

рони 02.01.2020 23:58
Malleys,
:thanks:


Часовой пояс GMT +3, время: 15:39.