Diskuze: Nemožnost najít chybu ve <script>
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Člen
Peter Mlich:15.1.2024 11:34
Ne, ztrata casu. Cely ten kod je nesmysl. Nejspis vytahly z chatGPT.
addItem - preci, kdyz naklonujes node, tak ti vytvori inputy se stejnym name jako je puvodni node. A v tom pripade se dopoustis html zlocinu, inputy nesmi mit stejne name v jednom formulari, pokud to nejsou input-radio. Vysledkem by melo byt to, ze uvazuje pouze prvni nebo posledni html tag, ktery ma stejne name. (jinak by se to chovalo v pripade dvou formularu)
Zajimave je, ze ty to dal pak scitas pres querySelector a className. Pak se to chova samozrejme spravne. Class muzes mit duplicitne. Ale zhlediska formulare, to stejne name je furt spatny napad.
No, jeste na to mrknu, ale ani trosku se mi to nelibi, co jsem zatim zjistil
Peter Mlich:15.1.2024 12:32
Editováno 15.1.2024 12:33
ok, mam dalsi podivnosti
- itemy je nutne vytvaret do neceho jako cart (nakupni kosik - addItem)
document.getElementById('rounding_vat').value = rounding_difference_vat.toFixed(2);takove id tam vubec neexistuje- a nebal bych se pouzit html validator, aby nasel aspon zakladni html chyby
Mne to prijde jako jakysi
prepis z jineho frameworku do js. Nebo, nevim, proc je to samy zmatek...
Peter Mlich:15.1.2024 13:23
ok, mozna jsem si tim ztizil praci, kdyz jsem to malinko prepsal, ale mam
jakousi funkcni verzi. A ted kdybys napsal nejaky priklad hodnot, ktere, kdyz
tam napisi, tak se spocitaji spatne a jake by tam meli byt cisla?
Seznam zmen je teda hodne...
- udelal jsem si extra cart, do ktereho davam pridane polozky
- nastavil jsem tlacitko odebrat jako skryte a objevi se po pridani
- zakomentoval jsem to nefunkcni id, nevedel jsem, co tam ma byt spravne
- zrusil jsem ve formulari odradkovani
- prepsal jsem si js-id zvlast, aby se to dalo zmenit na jedinem miste (ale
tim jsem si mozna pridelal praci, kdy jsem pak pred kazde id musel pridat form_,
a pod ... protoze jsem si to
tak blbe navrhl pres globalni promene Ale, podobne bych to resil pres js-class, ze bych to mel na jednom
miste a dal pouzival jen aliasy.)
- pridal jsem tam prepocitani ceny pri kazdem kliknuti na AddItem
... no, a vysledek je, ze mi to konecne prepocitava vsechna cisla na
obrazovce. A ted bych potreboval jen upresnit ty hodnoty, ktere tam mam zadat a
jaky by mel byt vysledek. Coz neni problem si zpetne vypsat do console.log
kazdou tu polozku a zkontrolovat, jake mela davat cislo.
online: https://jsfiddle.net/jno5wgdv/
<form id="invoiceForm" method="post">
<label for="customer_id">ID zákazníka:</label><br>
<input type="text" id="customer_id" name="customer_id"><br>
<label for="payment_method">Způsob platby:</label><br>
<select id="payment_method" name="payment_method">
<option value="cash">Hotově</option>
<option value="card">Kartou</option>
<option value="transfer">Převodem</option>
</select><br>
<hr>
<div id="new_item">
<div class="item">
<label for="item_name">Název položky:</label>
<input type="text" class="item_name" name="items[][name]"><br>
<label for="item_quantity">Počet kusů:</label>
<input type="number" class="item_quantity" name="items[][quantity]"><br>
<label for="item_price">Cena za kus bez DPH:</label>
<input type="number" step="0.01" class="item_price" name="items[][price]"><br>
<label for="item_price_vat">Cena za kus s DPH:</label>
<input type="number" step="0.01" class="item_price_vat" name="items[][price_vat]"><br>
<label for="item_vat">DPH:</label>
<select class="item_vat" name="items[][vat]">
<option value="0.21">21%</option>
<option value="0.10">10%</option>
<option value="0">0%</option>
</select><br>
<label for="item_total">Celková cena položky bez DPH:</label>
<input type="number" step="0.01" class="item_total" name="items[][total]" readonly><br>
<label for="item_total_vat">Celková cena položky s DPH:</label>
<input type="number" step="0.01" class="item_total_vat" name="items[][total_vat]" readonly><br>
<input type="hidden" class="removeItem" value="Odebrat položku"><br>
</div>
</div>
<input type="button" id="addItem" value="Přidat položku">
<hr>
polozky pro fakturu
<div id="cart">
</div>
<hr>
<label for="total">Celková cena bez DPH:</label><br>
<input type="number" id="total" name="total" readonly><br>
<label for="total_vat">Celková cena s DPH:</label><br>
<input type="number" id="total_vat" name="total_vat" readonly><br>
<label for="rounding">Zaokrouhlení:</label><br>
<input type="number" id="rounding" name="rounding" readonly><br>
<label for="vat_difference">Rozdíl mezi cenou bez DPH a s DPH:</label><br>
<input type="number" id="vat_difference" name="vat_difference" readonly><br>
<hr>
<input type="submit" value="Vytvořit fakturu">
</form>
<script>
var item_cols = {
'item_name': 0,
'item_quantity': 0,
'item_price': 0,
'item_price_vat': 0,
'item_vat': 0,
'item_total': 0,
'item_total_vat': 0,
'removeItem': 0
};
var ids = {
'customer_id': 0,
'new_item': 0,
'addItem': 0,
'cart': 0,
'payment_method': 0,
'total': 0,
'total_vat': 0,
'vat_difference': 0,
'rounding': 0,
//'rounding_vat': 0,
'invoiceForm': 0
};
for (i in ids) window['form_'+i] = document.getElementById(i);
for (i in item_cols) window['form_'+i] = new_item.querySelector('.'+i);// console.log(window[i])}
addItem.addEventListener('click', function() {
form_removeItem.type = 'button';
form_cart.appendChild(new_item.cloneNode(true));
form_removeItem.type = 'hidden';
form_item_name.value = '';
form_item_quantity.value = '';
form_item_price.value = '';
form_item_price_vat.value = '';
form_item_vat.value = '0.21'; // nevim, zda takhle je mozne nastavovat select-value
form_item_total.value = '';
form_item_total_vat.value = '';
updateInvoiceTotal();
});
function updateInvoiceTotal() {
var total = 0;
var total_vat = 0;
var items = form_cart.querySelectorAll('.item');
items.forEach(function(item) {
total += parseFloat(item.querySelector('.item_total').value);
total_vat += parseFloat(item.querySelector('.item_total_vat').value);
});
var rounding = form_payment_method.value === 'cash' ? 0 : 2;
var rounded_total = Math.round(total);
var rounded_total_vat = Math.round(total_vat);
var rounding_difference = rounded_total - total;
var rounding_difference_vat = rounded_total_vat - total_vat;
form_total.value = total.toFixed(rounding);
form_total_vat.value = total_vat.toFixed(rounding);
form_vat_difference.value = (total_vat - total).toFixed(rounding);
form_rounding.value = rounding_difference.toFixed(2);
//rounding_vat.value = rounding_difference_vat.toFixed(2); id=rounding_vat neexistuje
}
form_invoiceForm.addEventListener('input', function(event) {
var target = event.target;
if (target.classList.contains('item_price') || target.classList.contains('item_quantity') || target.classList.contains('item_vat')) {
var item = target.parentElement;
var price = parseFloat(item.querySelector('.item_price').value);
var quantity = parseInt(item.querySelector('.item_quantity').value);
var vat = parseFloat(item.querySelector('.item_vat').value);
var price_vat = price * (1 + vat);
var total = price * quantity;
var total_vat = price_vat * quantity;
var rounding = 2;
item.querySelector('.item_price_vat').value = price_vat.toFixed(rounding);
item.querySelector('.item_total').value = total.toFixed(rounding);
item.querySelector('.item_total_vat').value = total_vat.toFixed(rounding);
updateInvoiceTotal();
}
else if (target.classList.contains('item_price_vat')) {
var item = target.parentElement;
var price_vat = parseFloat(item.querySelector('.item_price_vat').value);
var quantity = parseInt(item.querySelector('.item_quantity').value);
var vat = parseFloat(item.querySelector('.item_vat').value);
var price = price_vat / (1 + vat);
var total = price * quantity;
var total_vat = price_vat * quantity;
var rounding = 2;
item.querySelector('.item_price').value = price.toFixed(rounding);
item.querySelector('.item_total').value = total.toFixed(rounding);
item.querySelector('.item_total_vat').value = total_vat.toFixed(rounding);
updateInvoiceTotal();
}
});
form_payment_method.addEventListener('change', function(event) {
var rounding = 2;
var items = form_cart.querySelectorAll('.item');
items.forEach(function(item) {
var price = parseFloat(item.querySelector('.item_price').value);
var price_vat = parseFloat(item.querySelector('.item_price_vat').value);
var total = parseFloat(item.querySelector('.item_total').value);
var total_vat = parseFloat(item.querySelector('.item_total_vat').value);
item.querySelector('.item_price').value = price.toFixed(rounding);
item.querySelector('.item_price_vat').value = price_vat.toFixed(rounding);
item.querySelector('.item_total').value = total.toFixed(rounding);
item.querySelector('.item_total_vat').value = total_vat.toFixed(rounding);
});
updateInvoiceTotal();
});
form_invoiceForm.addEventListener('submit', function(event) {
var items = form_cart.querySelectorAll('.item');
for (var i = 0; i < items.length; i++) {
var name = items[i].querySelector('.item_name');
var quantity = items[i].querySelector('.item_quantity');
var price = items[i].querySelector('.item_price');
var price_vat = items[i].querySelector('.item_price_vat');
if (!name.value || !quantity.value || (!price.value && !price_vat.value)) {
alert('Prosím, vyplňte všechna pole.');
if (!name.value) {
name.focus();
} else if (!quantity.value) {
quantity.focus();
} else if (!price.value && !price_vat.value) {
price.focus();
}
event.preventDefault();
return;
}
}
});
form_invoiceForm.addEventListener('click', function(event) {
if (event.target.classList.contains('removeItem')) {
event.target.parentElement.remove();
updateInvoiceTotal();
}
});
</script>Zobrazeno 6 zpráv z 6.