Js, почему такое поведение?

Question

[Kim_Soal]

работает:

var inp1 = document.createElement("input");
	var inp2 = document.createElement("input");

	calculate(inp1, inp2);

	div.appendChild(inp1);
	div.appendChild(inp2);
	
	function calculate(test1, test2){
		test1.oninput = function(){
			console.log(this.value);
		}
		test2.oninput = function(){
			console.log(this.value);
		}
	}

не работает:

var inp1 = document.createElement("input");
	var inp2 = document.createElement("input");

	calculate(inp1, inp2);

	div.appendChild(inp1);
	div.innerHTML +="qwe";
	div.appendChild(inp2);
	div.innerHTML +="qwe";



	function calculate(test1, test2){
		test1.oninput = function(){
			console.log(this.value);
		}
		test2.oninput = function(){
			console.log(this.value);
		}
	}

Стало интересно почему.
Вероятно, это очевидно сразу для кого-то.

Answer 1

[0xD34F]

div.innerHTML +="qwe"

Вас вводит в заблуждение оператор += - вам кажется, будто бы к содержимому div что-то там добавляется. Это не совсем так - содержимое div полностью перезаписывается. Соответственно, ранее добавленные элементы будут удалены и заменены новыми. А к новым элементам никаких обработчиков вы не привязываете - отсюда и отсутствие вывода в консоль.

Если хотите, чтобы добавление текста не приводило к перезаписыванию содержимого элемента, выполняйте его с помощью методов insertAdjacentText или append.

Comments

[Kim_Soal]

Похоже, что так.
Спасибо, отметил решением аналогичный но первый ответ.

[0xD34F]

Kim_Soal, "но первый"? Первый был мой, на 4 минуты раньше.

[Kim_Soal]

0xD34F, тостер берет время с последнего редактирования?

[0xD34F]

Kim_Soal, понятия не имею о чём вы сейчас. Время публикации ответа можно посмотреть, наведя курсор мыши на текст о времени, прошедшем с публикации - показывается всплывающая подсказка с датой и временем.