Форум

gunner17 · #1 (**permalink**) 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();

рони · #2 (**permalink**) 02.01.2020, 23:00

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

рони · #3 (**permalink**) 02.01.2020, 23:24

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

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

[html run]
... минимальный код страницы с вашей проблемой
[/html]

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

рони · #4 (**permalink**) 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 · #5 (**permalink**) 02.01.2020, 23:57

рони, вместо…

display: flex;
align-items: center;
justify-content: center;

в данном случае можно и так…

display: grid;
place-content: center;

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

рони · #6 (**permalink**) 02.01.2020, 23:58

Malleys,

Форум

Справочник

Discord чат

Курсы javascript