Всем доброго дня! Подскажите, почему результат функции виден на экране сразу, а не после нажатия кнопки (onclick)?

Question

Всем доброго дня! Подскажите, почему результат функции виден на экране сразу, а не после нажатия кнопки (onclick)?

Антон Ненашев Ученик (129), на голосовании 7 месяцев назад

 let allStudents=[
  {name: 'Валя', age: 11},
  {name: 'Таня',age: 24},
  {name: 'Рома',age: 21},
  {name: 'Надя', age: 34},
  {name: 'Антон', age: 7}
 ]

function createStudentsList(listArr) {
  let div = document.createElement('div');
  document.body.append(div);

  let list = document.createElement('ul');
  div.appendChild(list);

  for (let student of listArr) {
    let item = document.createElement('li');
    list.appendChild(item);

    let head = document.createElement('h2');
    head.textContent = student.name;
    item.appendChild(head);

    let span = document.createElement('span');
    span.textContent = 'Возраст: ' + student.age;
    item.appendChild(span);

    div.style.backgroundColor = 'aquamarine';
    div.style.border = '3px solid black';
    div.style.padding = '15px';
  }

  return;
}

let button = document.createElement('button');
document.body.append(button);
button.onclick = createStudentsList(allStudents);

button.setAttribute('type', 'button');
button.id = 'btn';
button.textContent = 'Показать список';
button.style.backgroundColor = 'pink';
button.style.border = '2px solid black';
button.style.borderRadius = '30px';
button.style.padding = '5px 10px';
button.style.marginBottom = '10px';

Answer 1

Те кто знают ответ на вопрос скорее на фрилансе сидят

Answer 2

Вася Пупкин Мудрец (14944) 8 месяцев назад

Потому что нужно вызывать функцию, вызывающую функцию

 button.onclick = () => {
    createStudentsList(allStudents);
};

Наверно, я не проверял

Антон НенашевУченик (129) 8 месяцев назад

Сработало! Спасибо большое!!!!!!!!!!!!!!!!!!!!!!!!!1

Вася Пупкин Мудрец (14944) Антон Ненашев, на здоровье

Answer 3

ChatGPT:
Проблема в том, что вы вызываете функцию createStudentsList непосредственно при назначении обработчика события кнопки, вместо того, чтобы передать ссылку на функцию. Ваш код должен выглядеть так:

 let button = document.createElement('button'); 
document.body.append(button); 
 
button.setAttribute('type', 'button'); 
button.id = 'btn'; 
button.textContent = 'Показать список'; 
button.style.backgroundColor = 'pink'; 
button.style.border = '2px solid black'; 
button.style.borderRadius = '30px'; 
button.style.padding = '5px 10px'; 
button.style.marginBottom = '10px'; 
 
// Используйте анонимную функцию для передачи ссылки на функцию, а не вызов ее результатом 
button.onclick = function() { 
  createStudentsList(allStudents); 
};

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