Problem w JS-sie. Pętla nie wykonuje się prawidłowo.

Question

Pierw przedstawie działanie algorytmu. Mamy obiekt Raport, który przejmuje jedną właściwość-tablicę. Mamy drugi obiekt, który obecnie zawiera jedynie tablicę stringów. Wywoływana jest metoda przepisana do Raport - printRaport. W której następnie tworzony jest element HTML section.W section element nav i navigacja po fragmencie elementu HTML (jeszcze to nie działa), za pomocą innerHTML. Następnie węzeł jest dołączany do dokumentu, do ostatniego węzła wskazanego w obiekcie SalaryOption.nodeParent (w tym przypadku  document.body[0]) , następnie tworzy elementy tbody i zagniedżonym w nim table. Następnie tworzone są kolejne węzły td i tr oraz przepisane strngi za pomocą innerHTML. I tu następuje coś dziwnego. Pętla generuje tylko jeden węzeł, choć powinen 8. I tu ciekawe wskażnik tablicy this.raportArr zatrzymuje się na pierwszym elemencie lub na ostatnim . Za to wskażnik RaportOption.valueArr zatrzymuje się na ostatnim elemencie tablicy. Dlaczego tak się dzieje? A oto kod:

Klasa taxContract.

var TaxContract = function (salaryHourZl, salaryHourGr, dayHour, nightHour){
	ValidateMethods.call (this);
	SalaryMethods.call(this);
	this.dayHour = dayHour;
	this.nightHour = nightHour;
	this.salaryHourZl = salaryHourZl;
	this.salaryHourGr = salaryHourGr;
	}

Metoda sum, przepisana do klasy TaxContract, wykorzystająca metody dziedziczonej klasy w SalaryMethods oraz właściwości z obiektu SalaryOption.

TaxContract.prototype.Sum = function (){
	var thisMonth = new Date;
	var taxArr = new Array;
	var hours = this.dayHour + this.nightHour;
	taxArr.push(hours)
	var salary = this.salaryHourZl + (this.salaryHourGr/100);
	var state;
	var overHour;

		for (var i = 0 ; i > SalaryOption.stateArr.length; i++){ // Ta czesc jeszcze nie dziala.
			if (thisMonth.getMonth() == SalaryOption.stateArr[i])
				{
				state = SalaryOption.stateArr[i];
				break;
				}
			}
	if (hours > state){
		overHour = hours - state;
		taxArr.push(overHour);
		overHour.bruttoBonus = (salary * salaryOption.overBonus)/100;
		taxArr.push(overHour.bruttoBonus);
		overHour.bruttoSum = (salary + over.bruttoBonus) * overHour;
		this.dayHour = this.dayHour - overHour;
		var bruttoSum = (salary * this.dayHour) +  ((salary + ((salary * SalaryOption.nightBonus)/100)) * this.nightHour) + overHour.bruttoSum;
		taxArr.push(bruttoSum);
		
	}
	else{
		overHour = 0;
		overHour.bruttoBonus = 0;
		taxArr.push(overHour);
		taxArr.push(overHour.bruttoBonus);
		var bruttoSum = (salary * this.dayHour) +  ((salary + ((salary * SalaryOption.nightBonus)/100)) * this.nightHour);
		taxArr.push(bruttoSum);
	}
	
	var taxTotal = this.taxSocial(bruttoSum) + this.taxRent(bruttoSum) + this.taxSick(bruttoSum);
		taxTotal = parseFloat (taxTotal.toFixed(2));
		taxArr.push(taxTotal);
	var taxHealth =  this.taxHealth (bruttoSum , taxTotal);
		taxArr.push(taxHealth);
	var taxIncome = this.taxIncome (bruttoSum, taxTotal, taxHealth);
		taxArr.push(taxIncome);
	var nettoSum = bruttoSum - taxTotal - taxHealth - taxIncome;
		nettoSum = parseFloat(nettoSum.toFixed(2));
		taxArr.push(nettoSum);
		var createRaport = new Raport (taxArr);
			createRaport.raportPrint();
		
		
}

Klasa Raport.

var Raport = function (paramArr){
this.raportArr = paramArr;
/*this.allHours = paramArr[0].toString;
this.overHour = paramArr[1].toString;
this.overBonus = paramArr[2].toString;
this.bruttoSum = paramArr[3].toString;
this.taxTotal = paramArr[4].toString;
this.taxHealth = paramArr[5].toString;
this.taxSocial = paramArr[6].toString;*/
}

Metoda w klasie Raport.

Raport.prototype.raportPrint = function (){
	var c_section = document.createElement('section');
			c_section.setAttribute('id', 'taxRaport');
			c_section.classList.add ('taxRaport');
			c_section.innerHTML = "<nav class='raportMenu'><ul><ol><button class='raportButton'>Informacje Podstawowe</button></ol><ol><button class='raportButton'>Zawansowane Informacje</button></ol></ul></nav>";
			SalaryOption.NodeParent.appendChild(c_section);
	var c_tbody = document.createElement('tbody');
			c_tbody.setAttribute('id' , 'raportTbody');
			c_section.appendChild(c_tbody);
	var c_table = document.createElement('table');
			c_table.setAttribute('id' , 'raportTable');
			c_tbody.appendChild(c_table);
	var c_tr = document.createElement('tr');
	var c_tr1 = document.createElement('tr');
	var c_td = document.createElement('td');
			alert(this.raportArr.length); // Pokazuje 8.
			for (var i = 0; i < this.raportArr.length ; i++){ // Tu jest ten problem.
				c_table.appendChild(c_td);
				c_td.appendChild(c_tr);
				c_tr.innerHTML = this.raportArr[i]; // 973.44
				c_td.appendChild(c_tr1);
				c_tr1.innerHTML = RaportOption.valueArr[i]; // Kwota netto.
				
				// c_table.innerHTML = "<td> <tr>" + RaportOption.valueArr[2] + "</tr>" + "<tr>" + this.raportArr[2] + "</tr>" + "</td>";
				}
			
}

Obiekt:

var RaportOption = {
					valueArr: new Array (
					'Godzin łącznie: ',
					'Nadgodzin łącznie: ',
					'Stawka na nadgodzinach: ',
					'Wynagrodzenie Brutto: ',
					'Podstawowe Ubezpieczenia: ',
					'Ubezpiecznie zdrowotne:',
					'Ubezpiecznie społeczne: ',
					'Wynagrodzenie netto: '
					),
					}

Osobiście jestem ciekaw dlaczego tak się dzieje, Choć, po głębszej analizie jestem bardziej skłoniony w pójść w stronę bardziej modelu AJAX plus zmiana hierarchi klas. (Utworzenie jednej głównej taxJS klasa bez argumentowa, następnie taxJS utworzony kolejne klasy Raport,Error,AJAX,order,Contract). Co o tym myślicie?

Answer 1

Coś poknociłeś przy generowaniu tabeli – czemu wiersze (tr) wsadzasz w komórki (td)? Nie zdziwiłbym się, gdyby to przez to nie działało.

Comments

Faktycznie :D.