Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

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

Антон Ненашев Ученик (129), на голосовании 1 месяц назад
 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';
Голосование за лучший ответ
Adskiy Drochila Гуру (4008) 2 месяца назад
Те кто знают ответ на вопрос скорее на фрилансе сидят
Вася Пупкин Мудрец (13299) 2 месяца назад
Потому что нужно вызывать функцию, вызывающую функцию
 button.onclick = () => {
createStudentsList(allStudents);
};
Наверно, я не проверял
Антон НенашевУченик (129) 2 месяца назад
Сработало! Спасибо большое!!!!!!!!!!!!!!!!!!!!!!!!!1
Вася Пупкин Мудрец (13299) Антон Ненашев, на здоровье
Александр Рогачёв Знаток (357) 2 месяца назад
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 будет вызываться только при нажатии на кнопку, а не при ее создании.
Похожие вопросы