Как изменить переменную count по клику на кнопку?

Question

[Cepesh16]

По клику на кнопку переменная count должна увеличиваться на 1, но этого не происходит, что я делаю не так?

https://jsfiddle.net/Cepesh16/x86z9prf/

<script>
var count = 1;
  var userID = 'userID ' + count;
  var passwordID = 'passwordId ' + count;
  $('#btnAddEmployee').click(function() {
    $('#tableEmloyeeManagement tbody').append(`<tr><td><input id="${userID}" class="border-0 bg-none" type="text" value="name user" disabled></td><td><input id="${passwordID}" class="border-0 bg-none" type="password" value="1234abcd" disabled></td><td><a id="editUserAndPassword" href="#"><i class="fas fa-edit mr-2"></i></a></td></tr>`);
    count++;
  })
</script>

Comments

[Шохрух Шаймардонов]

А теги вставляются? Залейте лучше код в песочницу, так быстрее и проще будет ответить

[Gene Hagmt]

Может у тебя проблема в html коде, а ты его не приложил.

[Cepesh16]

Шохрух Шаймардонов, прикладываю
https://jsfiddle.net/Cepesh16/x86z9prf/

[Cepesh16]

Gene Hagmt, вот ссылка
https://jsfiddle.net/Cepesh16/x86z9prf/

[FeST1VaL]

Cepesh16, В твоем коде есть проблема. У id не может быть пробела... и в прошлом вопросе, я тебе советовал сделать так. Так проще тебе было бы
https://jsfiddle.net/dshyu0gb/

[Cepesh16]

Артем Будин, да ваш вариант работает, я отмечу ваш прошлый ответ, я сразу не слишком понял что вы имели ввиду)

[Cepesh16]

Артем Будин, пожалуйста скажите а как лучше теперь прикрутить этот код?

нужно сопоставить кнопку editUserPassword полям userID и passwordID

$('#editUserAndPassword').click(function() {

		// вкл/выкл border
		if($('#userID').hasClass('border-0') && $('#userPassword').hasClass('border-0')) {
			$('#userID').toggleClass('border-0');
			$('#userPassword').toggleClass('border-0');
		}		
	})

[FeST1VaL]

Cepesh16, Примерно так. Тк вы добавляете блоки так сказать динамично, то на них изначально нету навешенного события клика тк они не грузились вместе со страницей... по этому я повесил глобально на body... + получил относительно этой кнопки поля не привязывавшись к их id, а взял по class'у. Там появились классы user__id, user__password, user__edit
Есть конечно более элегантные решения, но это более менее быстрое в плане написания)
https://jsfiddle.net/7z89ph6j/

Answer 1

[Beeetle]

Вы сначала делаете рендер строк таблиц, а только потом манипулируете с переменной

var count = 1;
	
	$('#btnAddEmployee').click(function() {
	count++;
	var userID = 'userID ' + count;
	var passwordID = 'passwordId ' + count;
		$('#tableEmloyeeManagement tbody').append(`<tr><td><input id="${userID}" class="border-0 bg-none" type="text" value="name user" disabled></td><td><input id="${passwordID}" class="border-0 bg-none" type="password" value="1234abcd" disabled></td><td><a id="editUserAndPassword" href="#"><i class="fas fa-edit mr-2"></i></a></td></tr>`);

	})

Comments

[Cepesh16]

Подскажите, а как теперь прикрутить данный код, кнопка edit должна менять свою строку с полями User и Password, сейчас код прописан для первой строки, как его переделать в универсальный, чтобы по id определять поля для редактирования

https://jsfiddle.net/Cepesh16/27jatd8L/14/

[Beeetle]

Cepesh16, на кнопку edit навешайте data-атрибут какой-нибудь, например data-id=count, и в зависимости от этого атрибута уже "пляшите")

[Cepesh16]

Beeetle, уже сам додумался, но спасибо)

Answer 2

[Gene Hagmt]

Могу только посоветовать провести изолированные тесты кусков кода, чтобы понять где именно не работает.