Stworzenie zmiennej i zapis logiki dla tworzenia zamówienia.

Question

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ź.

Comments

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.

Answer 1

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.

Comments

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.

---

Jeśli ktoś nie wie o co chodzi to zapraszam na priv udostępnię gita.

---

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

---

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.

---

Otwarty ponownie :)

Answer 2

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;
  }
}