При нажатии на кнопку создать новую кнопку
Добрый день.
Пробую решить задачку. При нажатии на кнопку, создается новая (назовем ее: 2) например , и уже при нажатии на новую (2), создается еще одна, а эта же кнопка (2) принимает css класс black (окрашивается в черный цвет). У меня выдает ошибку, мол не видит он еще эту кнопку 2, я понимаю что выполняется все и сразу, но может есть вариант. Желательно исправить этот скрипт, а не новый писать (если это возможно) Спасибо
let start = document.getElementsByTagName('button')[0];
start.addEventListener('click', function () {
let btn1 = document.createElement('button');
document.body.appendChild(btn1)
btn1.innerHTML = 'hi';
btn1.setAttribute("id", "first");
});
let start2 = document.getElementsById(first);;
start2.addEventListener('click', function () {
let btn2 = document.createElement('button');
document.body.appendChild(btn2)
btn2.innerHTML = 'hi';
btn2.setAttribute("id", "second");
btn2.classList.add('black');
});
|
demi379,
перенести строки 11 - 21 в строку 8, иначе они не имеют смысла, нельзя назначить клик тому чего нет, и кавычки не забудьте строка 11. |
demi379,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css"> .black {
background-color: #000000;
color: #FFFFFF;
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
let start = document.querySelector('button');
let num = 0;
start.addEventListener('click', function () {
let btn = document.createElement('button');
document.body.appendChild(btn)
btn.innerHTML = `hi ${++num}`;
btn.id = `first${num}`;
btn.addEventListener('click', function () {
let btn = document.createElement('button');
document.body.appendChild(btn)
btn.innerHTML = `hi ${++num}`;
btn.id = `second${num}`;
btn.classList.add('black');
});
});
});
</script>
</head>
<body>
<button>button 0</button>
</body>
</html>
|
спасибо сработало частично
спасибо
видимо эти строки я еще не понимаю, со знаком $ btn.innerHTML = `hi ${++num}`; btn.id = `first${num}`; Да действительно сработало и класс присвоился, но почему то не окрасился в другой цвет. (как задано в сss для этого класса) |
Цитата:
Что бы окрашивалась вторая кнопка (hi1), строку 28 надо заменить на this.classList.add('black'); |
Цитата:
|
| Часовой пояс GMT +3, время: 00:37. |