jak nie ma seniora - problem juniora

hej,

mam problem ze skryptem, który powinien odczytywać ceny z atrybutu data-price, a on uparcie robi to z wartości w td. Używam chata gpt bo niestety z palca czegoś takiego nie napisał bym samodzielnie, jako adept. Proszę o pomoc

kod js:

function formatPrice(price) {
    return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}

function showOrderSummary() {
    let summary = "<ul class='list-group'>";
    const rows = document.querySelectorAll('table tbody tr');
    rows.forEach(row => {
        const serviceCell = row.querySelector('th');
        const priceCell = row.querySelectorAll('td')[0];
        const quantityInput = row.querySelector('input[type="number"]');
        const checkboxInput = row.querySelector('input[type="checkbox"]');
        const service = serviceCell.innerText;
        const priceText = priceCell.innerText.replace('zł', '').trim();
        const price = parseFloat(priceText) || 0;

        if (quantityInput && parseInt(quantityInput.value) > 0) {
            const quantity = parseInt(quantityInput.value);
            summary += `<li class='list-group-item'>${service}: ${quantity} x ${formatPrice(price)} zł = ${formatPrice(quantity * price)} zł</li>`;
        } else if (checkboxInput && checkboxInput.checked) {
            summary += `<li class='list-group-item'>${service}: wybrano</li>`;
        }
    });
    summary += `</ul>`;

    // Poprawienie formatu całkowitego kosztu
    const totalCost = document.getElementById('total-cost').innerText.replace('zł', '').trim() + ' zł';
    summary += `<h4 class='mt-3'>Całkowity koszt: ${formatPrice(totalCost)}</h4>`;
    
    document.getElementById('order-summary-content').innerHTML = summary;
    $('#orderSummaryModal').modal('show');
}

function submitOrder() {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const phone = document.getElementById('phone').value;

    let orderDetails = `Imię i nazwisko: ${name}\nAdres e-mail: ${email}\nTelefon: ${phone}\n\n`;
    const rows = document.querySelectorAll('table tbody tr');
    rows.forEach(row => {
        const serviceCell = row.querySelector('th');
        const priceCell = row.querySelectorAll('td')[0];
        const quantityInput = row.querySelector('input[type="number"]');
        const checkboxInput = row.querySelector('input[type="checkbox"]');
        const service = serviceCell.innerText;
        const priceText = priceCell.innerText.replace('zł', '').trim();
        const price = parseFloat(priceText) || 0;

        if (quantityInput && parseInt(quantityInput.value) > 0) {
            const quantity = parseInt(quantityInput.value);
            orderDetails += `${service}: ${quantity} x ${formatPrice(price)} zł = ${formatPrice(quantity * price)} zł\n`;
        } else if (checkboxInput && checkboxInput.checked) {
            orderDetails += `${service}: wybrano\n`;
        }
    });

    // Poprawa formatowania kwoty
    const totalCost = document.getElementById('total-cost').innerText.replace('zł', '').trim() + ' zł';
    orderDetails += `\nCałkowity koszt: ${formatPrice(totalCost)}`;

    const form = document.createElement('form');
    form.method = 'POST';
    form.action = 'send_order.php';

    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'orderDetails';
    input.value = orderDetails;
    form.appendChild(input);

    document.body.appendChild(form);
    form.submit();
}

kod html:

<table class="table table-striped">
        <thead class="table-dark">
            <tr>
                <th scope="col"></th>
                <th scope="col">Standardowy</th>
                <th scope="col">Ilość</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Rozpoczęcie godzina wsparcia eksperckiego</th>
                <td data-price="350" id="price1"></td>
                <td class="quantity-input">
                    <button class="btn btn-sm btn-outline-danger" onclick="changeQuantity(this, -1, cena1=350)">-</button>
                    <input type="number" class="form-control" value="0" min="0" onchange="calculateTotal()">
                    <button class="btn btn-sm btn-outline-success" onclick="changeQuantity(this, 1, cena1=350)">+</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Weryfikacja/przygotowanie dostępnych dokumentów (strona maszynopisu)</th>
                <td data-price="120" id="price2"></td>
                <td class="quantity-input">
                    <button class="btn btn-sm btn-outline-danger" onclick="changeQuantity(this, -1, cena2=120)">-</button>
                    <input type="number" class="form-control" value="0" min="0" onchange="calculateTotal()">
                    <button class="btn btn-sm btn-outline-success" onclick="changeQuantity(this, 1, cena2=120)">+</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Audyt WCAG strony internetowej (10 podstron)</th>
                <td data-price="3000" id="price3"></td>
                <td class="quantity-input">
                    <button class="btn btn-sm btn-outline-danger" onclick="changeQuantity(this, -1, cena3=3000)">-</button>
                    <input type="number" class="form-control" value="0" min="0" onchange="calculateTotal()">
                    <button class="btn btn-sm btn-outline-success" onclick="changeQuantity(this, 1, cena3=3000)">+</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Audyt dostępności obiektu (jeden budynek)</th>
                <td data-price="4000" id="price4"></td>
                <td class="quantity-input">
                    <button class="btn btn-sm btn-outline-danger" onclick="changeQuantity(this, -1, cena4=4000)">-</button>
                    <input type="number" class="form-control" value="0" min="0" onchange="calculateTotal()">
                    <button class="btn btn-sm btn-outline-success" onclick="changeQuantity(this, 1, cena4=4000)">+</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Przygotwanie procedur uwzględniających dostępność</th>
                <td data-price="1000" id="price5"></td>
                <td class="quantity-input">
                    <button class="btn btn-sm btn-outline-danger" onclick="changeQuantity(this, -1, cena5=1000)">-</button>
                    <input type="number" class="form-control" value="0" min="0" onchange="calculateTotal()">
                    <button class="btn btn-sm btn-outline-success" onclick="changeQuantity(this, 1, cena5=1000)">+</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Szkolenie online (min. 4 godziny lekcyjne plus przerwy) z jednego z wybranych zagadnień szczegółowych</th>
                <td data-price="350" id="price6"></td>
                <td class="quantity-input">
                    <button class="btn btn-sm btn-outline-danger" onclick="changeQuantity(this, -1, cena6=350)">-</button>
                    <input type="number" class="form-control" value="0" min="0" onchange="calculateTotal()">
                    <button class="btn btn-sm btn-outline-success" onclick="changeQuantity(this, 1, cena6=350)">+</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Szkolenie stacjonarne (min. 6 godziny lekcyjne plus przerwy) z jednego z wybranych zagadnień szczegółowych</th>
                <td data-price="450" id="price7"></td>
                <td class="quantity-input">
                    <button class="btn btn-sm btn-outline-danger" onclick="changeQuantity(this, -1, cena7=450)">-</button>
                    <input type="number" class="form-control" value="0" min="0" onchange="calculateTotal()">
                    <button class="btn btn-sm btn-outline-success" onclick="changeQuantity(this, 1, cena7=450)">+</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Przygotowanie dostępnej strony internetowej</th>
                <td id="price8">Wycena indywidualna</td>
                <td class="quantity-input">
                    <input type="checkbox" class="checkbox" onchange="calculateTotal()">
                </td>
            </tr>
            <tr>
                <th scope="row">Zaprojektowanie pokoju wyciszeń</th>
                <td id="price9">Wycena indywidualna</td>
                <td class="quantity-input">
                    <input type="checkbox" class="checkbox" onchange="calculateTotal()">
                </td>
            </tr>
            <tr>
                <th scope="row">Pętla indukcyjna przenośna</th>
                <td data-price="2500" id="price10"></td>
                <td class="quantity-input">
                    <button class="btn btn-sm btn-outline-danger" onclick="changeQuantity(this, -1, cena10=2500)">-</button>
                    <input type="number" class="form-control" value="0" min="0" onchange="calculateTotal()">
                    <button class="btn btn-sm btn-outline-success" onclick="changeQuantity(this, 1, cena10=2500)">+</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>


    <div class="total-cost">
        <h4>Całkowity koszt: <span id="total-cost">0 zł</span></h4>
        
    </div>

jak nie ma seniora - problem juniora

juniorzy harcują, jak seniora nie czują XD

mam problem ze skryptem, który powinien odczytywać ceny z atrybutu data-price, a on uparcie robi to z wartości w td.

Nie widzę, żeby gdziekolwiek sczytywał cenę z atrybutu data-price. Chociaż jest tu coś ucięte i tutaj widać regexpa:

return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");

Nie wiem, czy to od tego, ale tego tak się nie robi (może ChatGPT ci zwrócił coś doraźnie pod prompt i zahalucynował).

Jak masz element DOM, to możesz użyć getAttribute:

priceCell.getAttribute('data-price')

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

albo używając dataset:

priceCell.dataset.price

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

problem występuje taki, że w td jak jest cena wpisana 3000zł to odczytuje to jako 3000zł, natomiast jest problem gdy cenę sformatuję tak: 3 000 zł - to wyświetla się tylko 3. Już męczę się nad tym kilka dni, nie wiem czemu te ceny bierze ciągle z td...

Zmień na:

const service = serviceCell.innerText;
const priceText = priceText.replace(/\D/g,'');
// const priceText = priceCell.innerText.replace('zł', '').trim();
const price = parseFloat(priceText) || 0;

Wyjaśnienie, trim usunie ci tylko białe znaki z końca, replace ci zamieni zł na '', a tym regexem usuniesz wszystkie znaki nie będące cyframi.

a co zmienić, aby dynamicznie przeliczać cenę w total-cost? Aktualnie jak w td jest formatowana cena tak: 3 500 zł, to dolicza tylko 3zł. Gdy sformatowana jest 3000zł, przelicza prawidłowo (3000zł).

Damian Marek napisał(a):

a co zmienić, aby dynamicznie przeliczać cenę w total-cost? Aktualnie jak w td jest formatowana cena tak: 3 500 zł, to dolicza tylko 3zł. Gdy sformatowana jest 3000zł, przelicza prawidłowo (3000zł).

To napisałem wyżej, masz przypadek typu "a30 640 . zł"
To ten regex /\D/g czyli \D znaczy non digit, czyli znak nie będący liczbą, a /g oznacza, wszystkie wystąpienia w danym stringu i to ma zamienić na brak znaku.

trim usunie ci tylko spacje z końca i początku nie usuwa wewnątrz spacji czyli między liczbami, inne znaki też mogą zepsuć parsowanie, parseFloat działa tak, że parsuje pierwszą liczbę i następny znak nie będący cyfrą od razu kończy parsowanie i zwraca wynik, czyli jak trafi spacje czy inny znak to uznaje, że już nie jest cyfrą.

Jest jeszcze przypadek gdy masz grosze i przecinek, to wtedy musisz trochę pokombinować, bo będzie więcej miejsc gdzie pójdzie błąd popełnić, validacja będzie trudniejsza.
Bo po przecinku musisz traktować liczby jako liczby odwrotne, a jak nie ma przecinka możesz uznać, że liczba jest w pełni całkowita i pominąć.
A jak jest reszta oddzielona kropką to wtedy parseFloat akurat radzi sobie z resztą będącą kropką, ale wtedy jeszcze do regexa będzie trzeba dodać wyjątek poza kropką, bo wtedy też się zepsuje.

Jedynie w poprzednim przykładzie źle napisałem kod, bo wczoraj mi się wydawał poprawny, miało być:

const priceText = priceCell.innerText.replace(/[^\d.]/g, "");

zamiast linijki

const priceText = priceCell.innerText.replace('zł', '').trim();

Trochę zmieniłem to jest teraz pattern negacja liczb, wszystkie inne znaki za wyjątkiem kropki wyszukane i zamienione na pusty.

wprowadziłem zmianę, ale nadal parsuje błędnie - zamiast 3 000 zł wypluwa 3zł jak dodaje cenę, która w td jest zapisana jako 3 000zł. Jak jest zapisana tak: 4000zł to liczy normalnie, poprawnie. Ale muszę mieć formatowanie ze spacją 3 000 zł.

źle sprawdzałem, już dobrze się wyświetla! wielkie dzięki Bogu Kodowania!