• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Stworzenie zmiennej i zapis logiki dla tworzenia zamówienia.

VPS Starter Arubacloud
+2 głosów
240 wizyt
pytanie zadane 5 maja 2021 w JavaScript przez ShockWave Bywalec (2,350 p.)
otwarte ponownie 5 maja 2021 przez ShockWave

Cześć, mam problem z zdefiniowaniem zmiennej oraz zapisem funkcji, poniżej wstawiam rysunek który obrazuje jak wyglądać ma interfejs.

\

Cena o produkcie A , B i C jest przechowywana w json, różnica cen także jest przechowywana w json. Problem polega na tym, że nie wiem jak przechować cenę produktu a potem odjąć od ceny różnicę przy wyborze opcji w select. U mnie działa to tak, że jak wybiorę opcję to potem muszę kliknąć znowu w button z produktem aby ta cena została zaktualizowana. Po wyborze opcji nie aktualizuje mi ceny dla wciśniętego wcześniej produktu.

orderContentButton1.addEventListener("click", (event) =>{
        if(orderContentSelect.value === "Srebrny")
        {
            orderContentPrice.innerText = parseFloat(data.sizes.items.U.price) + valueCurrency;
        }
        else if(orderContentSelect.value === "Czarny")
        {
            orderContentPrice.innerText = parseFloat((data.sizes.items.U.price) - 5) + valueCurrency;
        }
        else if(orderContentSelect.value === "Biały")
        {
            orderContentPrice.innerText = parseFloat((data.sizes.items.U.price) - 10) + valueCurrency;
        }
        else
        {
            orderContentPrice.innerText = parseFloat(data.sizes.items.U.price) + valueCurrency;
        }
 
orderContentSelect.addEventListener("input", (event) =>{
        if(event.target.value === "Srebrny")
        {
            orderImage.src = "img/silver.jpg";
            orderContentPrice.innerText = parseFloat(data.sizes.items.U.price) + valueCurrency;
        }
        else if (event.target.value === "Czarny")
        {
            orderImage.src = "img/black.jpg";
            orderContentPrice.innerText = parseFloat((data.sizes.items.U.price) - 5) + valueCurrency;
        }
        else if (event.target.value === "Biały")
        {
            orderImage.src = "img/white.jpg";
            orderContentPrice.innerText = parseFloat((data.sizes.items.U.price) - 10) + valueCurrency;
        }
        else
        {
            orderImage.src = "img/silver.jpg";
            orderContentPrice.innerText = parseFloat(data.sizes.items.U.price) + valueCurrency;
        }

Z góry dziękuję za odpowiedź.

2
komentarz 5 maja 2021 przez ScriptyChris Mędrzec (190,190 p.)

Ja bym te przyciski odnoszące się do ilości RAM-u przepisał na radio buttony, ponieważ użytkownik może wybrać tylko jeden z nich i to ładnie wkomponuje się w formularz (którego też tutaj swoją drogą brakuje).

Wtedy można tą grupę radio buttonów owinąć w <fieldset> i na tym zapiąć się na input event i w nim zaktualizować cenę, mając już do dyspozycji dane z klikniętego buttona. Tą wartość można przechować w zmiennej w wyższym scope (takim, do którego dostęp ma również kod odpowiedzialny za obsługę selecta z kolorami tych pamięci RAM) i wtedy przy obsłudze eventu change na select-ie zmiany koloru wykonać potrzebne obliczenia dotyczące ceny.

Spróbuj to zaimplementować w ten sposób, a w razie czego napisz konkretnie z czym dalej masz problem.


Na marginesie: przydało by się zastosować w tym kodzie DRY, ponieważ jest on niepotrzebnie powtarzalny. Myślę też, że czytelniej by było przynajmniej część layoutu napisać w formie HTML-a i to wrzucić w odpowiednie elementy DOM za pomocą innerHTML niż wszystko ogarniać na surowym DOM API.

2 odpowiedzi

+1 głos
odpowiedź 5 maja 2021 przez krissto7 Gaduła (3,100 p.)
zastosuj zdarzenie onchange dla selectu , wtedy przy każdej zmianie możesz podpiąć funkcję z warunkami , że np. jeśli została wybrana opcja 1 to nic nie odejmujesz , jeśli opcja 2 to odejmujesz te różnicę cen.
-1
komentarz 5 maja 2021 przez ShockWave Bywalec (2,350 p.)
przeniesione 5 maja 2021 przez ShockWave
Problem polega na tym, że po wybraniu option w select przekazuje mi cenę do <p> ale ta cena jest zawsze dla produktu A  .Jeżeli kliknę w produkt B i potem w option to najpierw pokazuje mi cenę dla produktu A i dopiero gdy znowu kliknę w button z przyciskiem B pokazuje mi cenę dla produktu B odpowiednio obniżoną, o ile jest to opcja 2 lub 3 .Podobnie jest z produktem C, a chciałbym , żeby po kliknieciu najpierw w przycisk z produktem B i potem wybraniu option ta cena była przekazywana dla produktu B a nie A.
-1
komentarz 5 maja 2021 przez ShockWave Bywalec (2,350 p.)
przeniesione 5 maja 2021 przez ShockWave
Jeśli ktoś nie wie o co chodzi to zapraszam na priv udostępnię gita.
komentarz 5 maja 2021 przez ShockWave Bywalec (2,350 p.)
edycja 5 maja 2021 przez ShockWave

Wielkie podziękowania dla @krissto7 pomógł mi w wiadomości prywatnej. Gdyby ktoś potrzebował z tym pomocy to priv :)

2
komentarz 5 maja 2021 przez ScriptyChris Mędrzec (190,190 p.)
Wiesz, jeśli już szukasz pomocy u osób poprzez PW, to choćby z szacunku do ich czasu mógłbyś nie zamykać tematu, gdy jedna z tych osób prześle Ci rozwiązanie prywatnie, bo może ktoś inny będzie w stanie odpowiedzieć później, ale już nie zdąży bo zamknąłeś pytanie. Na forum rozwiązanie będzie publiczne dostępne dla potomnych, a nie każdemu w przyszłości będzie się chciało pisać PW do Ciebie, abyś im je udostępnił. Ja swoją propozycję napisałem więc w komentarzu do pytania.
komentarz 5 maja 2021 przez ShockWave Bywalec (2,350 p.)
Otwarty ponownie :)
0 głosów
odpowiedź 11 maja 2021 przez VBService Ekspert (251,210 p.)

Propozycja

<div class="container">
  <div class="product-show-container">
    <div class="product-card">
      <div class="price"><span data-orginal-price="10">10</span>zł</div>
      <button data-active="false">A</button>
    </div>
    <div class="product-card">
      <div class="price"><span data-orginal-price="15">15</span>zł</div>
      <button data-active="false">B</button>
    </div>
    <div class="product-card">
      <div class="price"><span data-orginal-price="20">20</span>zł</div>
      <button data-active="false">C</button>
    </div>
  </div>
  <select>
    <option value="Srebrny">Option 1</option>
    <option value="Czarny">Option 2 (-5 zł)</option>
    <option value="Biały">Option 3 (-10 zł)</option>
  </select>
</div>
* {
  box-sizing: border-box;
}
.container {
  width: 500px;
  border: 2px solid black;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.product-show-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  margin: 0;
  padding: 1em;
}
.product-card {
  width: 30%;
  text-align: center;
}
.product-card button {
  width: 100%;
  height: 80px;
  border-radius: 1em;
  margin-top: 0.25em;
  cursor: pointer;
}
.container select {
  display: block;
  width: 90%;
  margin: 1em auto;
}


.active {
  border: 1px solid limegreen;
}
window.onload = () => {
  const orderContentPrices = document.querySelectorAll('.product-card .price span');
  const orderContentButtons = document.querySelectorAll('.product-card button');
  const orderContentSelect = document.querySelector('select');

  orderContentButtons.forEach((button, index) => {
    button.addEventListener('click', (event) => {
      const active = (event.target.getAttribute('data-active') === 'true') ? false : true;
      event.target.setAttribute('data-active', `${active}`);
      if (active) {
        event.target.classList.add('active');
        orderContentPrices[index].textContent = setPrice(index);
      } else {
        event.target.classList.remove('active');
      }
    })
  })  

  orderContentSelect.addEventListener('change', (event) => {
    //console.log(event.target.options[event.target.selectedIndex].value);
    //console.log(event.target.value);
    orderContentButtons.forEach((button, index) => {
      if (button.getAttribute('data-active') === 'true') {
        orderContentPrices[index].textContent = setPrice(index);      
      }
    })
  })

  function setPrice(index = 0) {
    const orginalPrice = orderContentPrices[index].getAttribute('data-orginal-price');
    const     discount = getDiscount(orderContentSelect.value);
    const        price = parseFloat(orginalPrice) - discount;
    return (price < 0) ? 0 : price;
  }
}

function getDiscount(name = 'Srebrny') {
  switch (name) {
    case 'Czarny': return 5; break;
    case 'Biały':  return 10; break;
    case 'Srebrny':
    default: return 0;
  }
}

 

Podobne pytania

+1 głos
2 odpowiedzi 995 wizyt
0 głosów
1 odpowiedź 676 wizyt
pytanie zadane 2 stycznia 2019 w JavaScript przez kordix Gaduła (3,910 p.)
0 głosów
1 odpowiedź 137 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...