Форум

demi379 · #1 (**permalink**) 26.04.2020, 23:34

Добрый день.
Пробую решить задачку. При нажатии на кнопку, создается новая (назовем ее: 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');
	

});

рони · #2 (**permalink**) 26.04.2020, 23:48

demi379,
перенести строки 11 - 21 в строку 8, иначе они не имеют смысла, нельзя назначить клик тому чего нет, и кавычки не забудьте строка 11.

рони · #3 (**permalink**) 27.04.2020, 00:02

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>

demi379 · #4 (**permalink**) 27.04.2020, 12:03

спасибо
видимо эти строки я еще не понимаю, со знаком $
btn.innerHTML = `hi ${++num}`;
btn.id = `first${num}`;

Да действительно сработало и класс присвоился, но почему то не окрасился в другой цвет. (как задано в сss для этого класса)

voraa · #5 (**permalink**) 27.04.2020, 13:42

Сообщение от demi379

спасибо
видимо эти строки я еще не понимаю, со знаком $
btn.innerHTML = `hi ${++num}`;
btn.id = `first${num}`;

https://developer.mozilla.org/ru/doc...mplate_strings

Что бы окрашивалась вторая кнопка (hi1), строку 28 надо заменить на
this.classList.add('black');

рони · #6 (**permalink**) 27.04.2020, 13:49

Сообщение от demi379

но почему то не окрасился в другой цвет.

а где присвоение класса для first?

Форум

Справочник

Discord чат

Курсы javascript