CRUD w JS - edytowanie nie działa poprawnie

pytanie zadane 3 marca 2017 w JavaScript przez Kamil Naja Nałogowiec (27,410 p.)

Cześć, ostatnio walczę z prostą aplikacją udostępniającą operacje CRUD - piszę ją od 0 w czystym JS.

Poniżej kod przed stylowaniem

http://codepen.io/KamilNaja/pen/GWqRqN

Problem pojawia się przy edytowaniu pól - aby to zrobić, trzeba kliknąć w element, edytować tekst w formularzu i zatwierdzić przyciskiem pod spodem. Mechanika działa dobrze przy jednym elemencie, ale gdy zaczniemy edytować drugi (musi się podświetlić na czerwono), zamieniamy jednocześnie kod pierwszego. Przy edycji trzeciego, zmienia się kod wszystkich trzech pól. Macie może sugestie do do naprawy?

komentarz 6 marca 2017 przez hoktaur Pasjonat (22,250 p.)

Czy poradziłeś sobie już z problemem?

komentarz 9 marca 2017 przez Kamil Naja Nałogowiec (27,410 p.)

Tak, ale pojawiło się 10 innych, np id nie może składać się z 2 wyrazów, bo wywala błędy :) Projekt rozwijam tutaj https://github.com/Kamilnaja/another-crud-app :)

3 odpowiedzi

odpowiedź 3 marca 2017 przez kubaapk Nałogowiec (44,270 p.)

Pewnie jest ładniejsze rozwiązanie, ale mi się nie chce szukać, możesz samemu spróbować. :P
http://codepen.io/anon/pen/JWKorN

komentarz 3 marca 2017 przez Kamil Naja Nałogowiec (27,410 p.)

Hej, dzięki, o to mi chodziło. Właśnie sam zacząłem kombinować z rozwiązaniem z id :)

odpowiedź 9 marca 2017 przez hoktaur Pasjonat (22,250 p.)

Ok skoro nie skończyłeś to ja już naklepałem :), masz gotowca:

<!DOCTYPE html>
<html lang="pl">
<head>
	<title></title>
	<meta charset="utf-8">
	<style>
		body {
			background-color: grey;
		}
	
		fieldset {
			width: 320px;
			position: relative;
			
		}
		.listPointEdit {
			cursor: pointer;
		}
	</style>
  
</head>
<body>
	<fieldset>
		<legend>Lista 1</legend>
		<div></div>
		<ul id="list1"></ul>
	</fieldset>
	
	<fieldset>
		<legend>Lista 2</legend>
		<div></div>
		<ul id="list2"></ul>
	</fieldset>
		
	<fieldset>
		<legend>Lista 3</legend>
		<div></div>
		<ul id="list3"></ul>
	</fieldset>
	
		
	<script>

		function List(nodeID, pointsDefault = []) {
			this.Default = pointsDefault;
			this.list = [];
			this.listNode = document.getElementById(nodeID);

			this.displayAll = function() {
				
				var pointDefault;
				
				for(let pointDefault of this.Default) {
					var listLastIndex = this.list.push(new Point(pointDefault)) - 1;
					this.list[listLastIndex].name = pointDefault;

					var targetElement = document.createElement('li');
					targetElement.className += 'listPointEdit';
					targetElement.innerHTML = this.list[listLastIndex].name;
					
					this.listNode.appendChild(targetElement);
					
					this.list[listLastIndex].node = this.listNode.lastChild;
					this.list[listLastIndex].node.addEventListener('click', this);
				}
				
				var optionElement = document.createElement('button');
				optionElement.innerHTML = 'Dodaj';
				optionElement.className = 'listPointAdd';
				this.listNode.parentNode.insertBefore(optionElement, this.listNode.nextSibling);
				this.listNode.nextSibling.addEventListener('click', this);
				
			}
			
			this.handleEvent = function(event) {
					
				var eventTargetClass = event.target.className;
				if(eventTargetClass.indexOf('listPointEdit') >= 0 ) {
					var listIndex = this.list.findIndex(function(currentPoint) { return currentPoint.node == event.target; });
					this.list[listIndex].node.innerHTML = '<input type="text" value="' + this.list[listIndex].name + '" placeholder="Wprowadź nazwę..." /><button class="listPointSubmit">&radic;</button><button class="listPointCancel">X</button><button class="listPointRemove">Usuń</button>';
					
				} else if(eventTargetClass.indexOf('listPointSubmit') >= 0 ) {
					var listIndex = this.list.findIndex(function(currentPoint) { return currentPoint.node == event.target.parentNode; });
					var currentPointValue = (event.target.previousSibling.value).trim();
					if(currentPointValue) {
						this.list[listIndex].name = currentPointValue;
						this.list[listIndex].node.innerHTML = this.list[listIndex].name;
					} else {
						this.list[listIndex].node.childNodes[0].style.border = '1px solid red';
					}
				
				} else if(eventTargetClass.indexOf('listPointCancel') >= 0 ) {
					var listIndex = this.list.findIndex(function(currentPoint) { return currentPoint.node == event.target.parentNode; });
					this.list[listIndex].node.innerHTML = this.list[listIndex].name;
				
				} else if(eventTargetClass.indexOf('listPointRemove') >= 0 ) {
						var listIndex = this.list.findIndex(function(currentPoint) { return currentPoint.node == event.target.parentNode; });
						this.list[listIndex].node.remove();
						this.list.splice(listIndex, 1);
					
				} else if(eventTargetClass.indexOf('listPointAdd') >= 0 ) {
					var listLastIndex = this.list.push(new Point('')) - 1;
					
					var targetElement = document.createElement('li');
					targetElement.className += 'test listPointEdit';
					targetElement.innerHTML = '<input type="text" value="' + this.list[listLastIndex].name + '" placeholder="Wprowadź nazwę..." /><button class="listPointSubmit">&radic;</button><button class="listPointRemove">Usuń</button>';
					
					this.listNode.appendChild(targetElement);
					
					this.list[listLastIndex].node = this.listNode.lastChild;
					this.list[listLastIndex].node.addEventListener('click', this);
				}
			}
			
			function Point(name) {
				this.name = name;
				this.node;
			}
		}
		
		
		
		(function() {
			var list;
			
			list = new List('list1', ['PL', 'EU']);
			list.displayAll();
			
			list = new List('list2');
			list.displayAll();
			
			var i,
			testTable = [];
			for(i = 0; i < 10000; i++) {
				testTable.push(i);
			}
			list = new List('list3', testTable);
			list.displayAll();

		})();
	</script>
</body>
</html>

Daj znać czy o to chodziło?

komentarz 10 marca 2017 przez Kamil Naja Nałogowiec (27,410 p.)

Dzięki, ale nie szukam gotowców. Zauwążyłem, że pisanie takich swoich programów, daje znacznie więcej korzyści, niż robienie tutoriali czy czytanie książek - mnóstwo rzeczy się uczy dodatkowo.