Přidávání polí a následné počítání v javascriptu

Takéto veci sa robia tak, že v nadradenom elemente (napr. v tom prvku div id=sem) odchytávaš udalosti, ktoré prebublú z podradených prvkov pri zmene obsahu. V obsluhe tejto udalosti zistíš, na ktorom prvku tá zmena vznikla. Podľa toho upravíš požadovaný prvok. Je pre to dokonca aj buzzword: "event delegation". Výhodou je najmä zlepšenie výkonu, ktoré býva pri veľkých štruktúrach veľmi výrazné - nemusíš nastavovať obslužné funkcie udalostí pre každý prvok.

Takže niekde pod prvok div id=sem vložíš nasledovný skript:

var sem = document.getElementById('sem');
var onInput = function(e) {
	var target = e.target || e.srcElement;
	var match = target.name && target.name.match(/^(?:ks|cena)(\d+)$/);
	if (match) {
		var num = match[1];
		var form = target.form;
		var result = +form['ks' + num].value * +form['cena' + num].value;
		form['vysledek' + num].value = !isNaN(result) ? result : '';
	}
};
sem.oninput = function(e) {
	this.onkeydown = null;
	onInput.call(this, e);
};
sem.onkeydown = function(e) {
	onInput.call(this, e);
};

Takže vo funkcii onInput zistíme, na ktorom prvku udalosť vznikla pomocou e.target (keď ho v prípade IE nenájdeme v e.target, tak ho zoberieme z e.srcElement). Skontrolujeme, že tento prvok má meno, ktoré začína slovom 'ks' alebo 'cena' a končí číslom N. Ak áno, vytiahneme pomocou tohto čísla hodnoty z polí ksN a cenaN a ich súčin uložíme do poľa vysledekN.
Funkciu onInput nastavíme ako obslužnú funkciu udalosti oninput (s fallbackom na onkeydown).

Teraz sa môžeme pozrieť na zvyšok tvojho kódu. Funkciu celkem nepotrebuješ, pretože ju nikde nevoláš. Nastavuješ ju síce cez setAttribute, ale obslužné funkcie sa takto nenastavujú. Vďaka event delegation to ani nepotrebuješ nastavovať, takže to môže ísť preč.

Ďalej môže ísť preč nastavovanie atribútu id, pretože to nikde nepotrebuješ. Nastavenie atribútu name môžeš nastaviť normálne cez el.name = name a nemusíš používať setAttribute - bude to tak lepšie (prehľadnejšie a možno aj rýchlejšie).

Globálnu premennú num_of_lines tiež nepotrebuješ, lebo počet prvkov si vieš vytiahnuť z počtu spanov v elemente div id=sem (ak by si to chcel optimalizovať na výkon, tak je samozrejme lepšie použiť premennú, kde si budeš pamätať počet prvkov).

Inline JavaScript priamo v kóde nevyzerá moc dobre (v elemente a onclick=plus('new_sab')). Lepšie bude priradiť tomu odkazu nejaký identifikátor a následne naň pomocou JavaScriptu zavesiť obslužnú funkciu. Identifikátor new_sab tiež nepotrebuješ, takže môže ísť preč.

Sorry, že som sa rozpísal o veciach, na ktoré si sa nepýtal. V prílohe je príklad, ako by to mohlo vyzerať.

wow dobrý si funguje to díky moc ;)