Koszyk js frontend

Question

Mianowicie, chciałbym zrobić koszyk, taki kliknij na jednego diva , pobiera z niego wartość value i dodaje do wartości koszyka, jednocześnie zwiększa liczbę zawartych w nim przedmiotów. Jestem zielony w js więc może mi ktoś podpowiedzieć jak mogę zrobić coś takiego ?  

function doKoszyka()
{
 var cena = document.getElementsByClassName("dodaj").value;
}

Próbowałem przez getElementsByClassName, ale funkcja onclick nie rozpoznaje na jaki obiekt został kliknięty :(

Answer 1

https://codepen.io/anon/pen/aYawLd

Comments

W tym jest tylko jeden problem, mianowicie jak dodaję się więcej produktów to wychodzą duże liczby po przecinku. Np. 287.96999999999997.

---

No to juz wystaraczy zaokraglic, ale z tym juz sobie poradzisz.

---

No tak można wykorzystać metodę Math.round(), ale będzie mi to zaokrąglało do pełnej liczby, a ja chce z groszami.

---

Math.round(liczba_z_przecinkiem * 100) / 100;

---

Na to samo wychodzi ;( Liczba z przecinkiem jest automatycznie skracana, więc jeśli podstawimy tam .Np. jakieś liczby to: (69,9*100)=6990/100= 69.9.

---

Znasz angielski ? Zapytania google są serio łatwe, a nie każdemu chce się pomagać w tak trywialnych problemach. Obiecuję Ci, że dużo szybciej znajdziesz odpowiedź na swoje pytanie. Na SO były już przerabiane, chyba wszystkie problemy świata.

Spróbuj toFixed(2). Sam nie pamiętam, dawano nie miałem styczności z zaokrąglaneim(ROUND) liczb.

Answer 2

1.  Zamiast var użyj let/const

2. Aby zwiększać ilość przedmiotów musisz utworzyć zmienną, i później przy dodaniu produktu ją inkrementować (zwiększać wartość o 1)

3. 

document.getElementsByClassName("dodaj").value;

Nie możesz tak zrobić. JS nie wie do czego ma się odnieść, Jeśli już to tak:

document.getElementsByClassName("dodaj")[0].value;

4. Jak funkcja onClick nie rozpoznaje jaki obiekt został kliknięty? Jeśli robisz to w HTML, do funkcji wystarczy podać w argumencie this a w funkcji już sobie z tego pobierać value.

5. Nie korzystaj z onClick, mamy HTML5. Korzystaj z addEventListener

 

Comments

Dziękuję za szybką odpowiedź, ale mam problem z tym że nie pobiera mi z konkretnego buttona. Wyświetla mi tylko value z pierwszego buttona.

<div id="k">Koszyk</div>
<div>95.99zł</div>
    <button class="dodaj" id="1" value="95.99" onclick="koszyk(this)">95.99</button>
<div> 169.99zł</div>
    <button class="dodaj" id="2" value="169.99" onclick="koszyk(this)">Dodaj</button>
<div> 125.99zł</div>
    <button class="dodaj" id="3" value="125.99" onclick="koszyk(this)">Dodaj</button>
<div>525.99zł</div>
    <button class="dodaj" id="4" value="525.99" onclick="koszyk(this)">Dodaj</button>


<script>
function koszyk(){
    let item;
let cena = document.getElementsByClassName("dodaj")[0].value;
item++;
document.getElementById("k").innerHTML = cena + " ZŁ (" +  item + ")";
}
</script>

Muszę przysiąść do nauki javascriptu, ale mam mało czasu :(

---

Wyświetla Ci wartość tylko pierwszego przycisku, ponieważ, mimo że do funkcji koszyk przekazujesz referencję do przycisku, to w funkcji z niej nie korzystasz, a zamiast tego odczytujesz cenę stąd:

let cena = document.getElementsByClassName("dodaj")[0].value;

Powinieneś dodać argument o nazwie np. button i cenę pobrać z jego property value, czyli:

function koszyk( button ) {
    /* ... */

    let cena = button.value;

    /* ... */
}

 

Answer 3

Po pierwsze primo to weź zrób własny obiekt / funkcję / typ danych / prototyp, nie wiem jak się to nazywa w JS bo nienawidzę frontendu ale coś się robiło, jak trzeba to trzeba. Mianowicie deklarujesz to w ten sposób:

function Basket(){
   this.products = [];
   this.basketValue = 0;
   

  this.addProductToBasket = function (product) {
     // Tutaj dodawanie produktu do listy, zwiększanie wartości koszyka itd
    }
}

Zrób też podobnie z "product". Bardzo to zwiększy czytelność i łatwość pisania kodu :)

PS. Sorry za złe formatowanie ale pisane z telefonu.

Comments

Jeśli już to wg mnie lepiej zrobić klasę, np.:

class Basket {
    constructor () {
        this.products = [];
    }
    addProductToBasket( product ) {
        this.products.push( product );
    }
    getBasketValue() {
        const prices = this.products.map( ({price}) => price );
        return prices.reduce( (p1, p2) => (p1 + p2)/100, 0 );
    }
}

const myBasket = new Basket();

myBasket.addProductToBasket(
    { name: 'produkt A', price: 5000 },
    { name: 'produkt B', price: 4000 },
	{ name: 'produkt C', price: 1000 },
)

myBasket.getBasketValue(); //50

Oczywiście to tylko tak poglądowo, bo w faktycznym kodzie jeśli by pójść w ten sposób to trzeba by zabezpieczyć bezpośrednie modyfikowanie products itp. ale nie chce mi się tutaj bawić np. w settery i gettery.

---

W sumie to wychodzi prawie na to samo, bo klasy w JS de'facto nie istnieją w takiej samej postaci jak w innych językach, jest to tzw. synactic sugar, kod ten zostaje później zamieniany na mniej więcej taki, jaki napisałem wyzej.

---

Z tym zamienianiem to nie do końca, ale co do klas to się zgadzam. Wg mnie każdy kto chce się bawić JS powinien przede wszystkim poznać dobrze czym są prototypy i po prostu przestawić się na takie myślenie, bez porównywania usilnego do np. PHP, Java itp.

dałem ten przykład dlatego, że wg mnie jest to trochę czytelniejsza forma niż tworzenie funkcji konstruktora i zabezpiecza nas przed paroma rzeczami jak np. wywołanie bez słówka "new". Można to oczywiście okodować, ale w class mamy to jakby od razu (tak w dużym uproszczeniu).

klasy w JS de'facto nie istnieją w takiej samej postaci jak w innych językach

ale będziemy mieć niedługo natywnie wspierane prywatne właściwości :P a tak serio to powiem Ci, że często spotykam się z usilnym porównywaniem np. JS do PHP... co rodzi tylko niepotrzebne problemy. Można co prawda w JS nawet zasymulować interfejsy (Comandeer nawet jakiś czas temu pisał coś o tym na blogu :) ale wszystko oki, dopóki jest to robione świadomie, a nie dlatego "żeby było jak w PHP, Java itp." :)

---

No tak, zgadzam się, po prostu na codzień programuje w PHP i taka dziwna składnia, to wszystko w JS jest dla mnie dość dziwne. Nie mówię, że z tego powodu JS jest zły, po prostu pisze tak, jak umiem, nie staram się pomoc dla autora mimo, że nie znam za bardzo JS, ale wiem jak bym to okodował PHP, i na wzór tego napisałem to w JS (chyba) :D

---

Powiem Ci, że dla mnie z początku w JS wiele rzeczy wydawało się dziwnych... ale teraz nie wyobrażam sobie zmiany na inny język :)

W PHP troszkę się bawiłem, jeszcze w czasach gdy używało się CodeIgniter i Smarty (teraz chyba Twig jest na topie jeśli dobrze kojarzę wypowiedzi tu z forum), ale jakoś nigdy się z PHP nie polubiliśmy, choć fakt, że obiektówka jest fajna i chyba łatwiej zrozumieć dla początkującego wzorce projektowe właśnie np. na przykładzie PHP, gdzie są interfejsy, klasy abstrakcyjne, cechy itp. itd.

Answer 4

Teraz mam tylko jeden problem, gdy wywoływana jest zawartość koszyka i ma się w niej zawierać polski znak to robi krzaka. A w normalnym htmlu mam ustawione kodowanie znaków i wyświetla mi polskie znaki. A i jeszcze jedno, poprzez przetwarzanie danych na dane typu folat w "parseFloat(this.value)". Przy wypisywaniu ucina zera z pełnej liczby. Np. Gdy jest liczba "69.90", to zwraca liczbę "69.9". Jak mógłbym to naprawić ?

function Koszyk(){
const divs = document.getElementsByClassName("obj");
const koszyk = document.getElementById("cash");
let ogolnaCena = 0;
let item = 0;
for(let i=0; i < divs.length; i++) {	
  divs[i].addEventListener('click', dodajDoKoszyka);
}


function dodajDoKoszyka(){
    let cena = parseFloat(this.value) + ogolnaCena;
  item++
  koszyk.innerHTML = `${cena} zł/prod(${item})`;
  ogolnaCena += parseFloat(this.value);  
}
}

Dziękuję wszystkim którzy się zainteresowali tematem, doceniam zaangażowanie :)