Jak zsumować liczby z select'a

0

Siemanko, więc tak jestem zielony jeśli chodzi o JS. Więc tak chce zrobić program który ułatwi prace, konkretnie chodzi o to aby było pole(select) ( takich pól z 50 albo 100) i Lista rzeczy do wyboru. Obok pole(number) gdzie osoba podaje ilość danych rzeczy. I chodzi mi o to aby (bez przycisku) przy każdym polu wyświetlała się suma(np. Produkt 1=kabel, value='3.90' użytkownik w drugim polu podaje np. 10 to wynik obok tego wyświetla się 39.00zł). I tak przy każdym polu, żebym potem sobie mógł wszystko w szybszy sposób podsumować.

KOD:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script>

         
    </script>
</head>
<body>
    <h2>Kable:</h2>
    <!----><!----><!----><!----><!----><!---->
    Produkt 1
    <select name='anch1'>
   <option value=''>--wybierz--</option>
   <option value='10'>Jeden ++</option>
   <option value='20'>kolejny ++</option>
   <option value='30'>etc.c ++</option>
   <option value='40'>tak dalej ++</option>
   <option value='50'>2.5 ++</option>
  </select>
  </br>
   
  Produkt 2
  <select name='anch1'>
   <option value=''>--wybierz--</option>
   <option value='1.60'>zzz ++</option>
   <option value='2.80'>ccc ++</option>
   <option value='3.30'>www ++</option>
   <option value='44.0'>aaa ++</option>
   <option value='5.60'>sss ++</option>
  </select>
  </br>
   
  Produkt 3
  <select name='anch1'>
   <option value=''>--wybierz--</option>
   <option value='10'>węższy ++</option>
   <option value='0.20'>Szerszy ++</option>
   <option value='1.30'>dsad ++</option>
   <option value='3.40'>ewew ++</option>
   <option value='5.20'>popo ++</option>
  </select>
  etc...
     
    <input type="number" name="ilosc">

    <div id='anch1'>Sumowanie zamowienia 1</div>
    <!----><!----><!----><!----><!----><!---->

</body>
</html>

**Jeśli chodzi o JS to nie wiem jak to zacząć, jak coś zacznę to nie klei mi się to z resztą.
Będę wdzięczny jak ktoś by wyjaśnił :D

0

Kiepski jestem z JS, ale ja bym zrobił to tak.

Najpierw zebrał wartości do zsumowania z konkretnego selecta:

const values = Array.from(document.querySelectorAll("select option"), item => {
     if (item.value.length > 0) return parseInt(item.value)
})

##  A potem je zsumował :P

const sum = values.reduce((previous, current)=>{
     return previous + current
})

Pisane z palucha na oko :P Oprogramuj sobie coś podobnego w funkcje i podepnij pod konkretne elementy, żeby zwracało zmienną sum jako text w konkretnym miejscu.

0

Jeśli dobrze zrozumiałem co chcesz osiągnąć to takie coś powinno zadziałać.

W select można wybrać cenę produktu, oraz obok w inpucie poszczególną ilość.
Do znacznika span będzie trafiać suma cena * ilość dla tego konkretnego produktu, a na samym dole w divie #summary będzie zliczane łączne podsumowanie wszystkich kwot

<div class="item">
  <label>
    Produkt 1
  
    <select>
      <option>1</option>
      <option>1.50</option>
      <option>1.99</option>
    </select>
  </label>
  
  <label>
    Podaj ilość
    <input type="number">
  </label>

  <span></span>
</div>

...
...

<div class="item">
  <label>
    Produkt X
  
    <select>
      <option>1</option>
      <option>1.50</option>
      <option>1.99</option>
    </select>
  </label>
  
  <label>
    Podaj ilość
    <input type="number">
  </label>

  <span></span>
</div>

<div id="summary"></div>

Ten kod na pewno jeszcze będziesz musiał sobie dopasować, ale jako taka wersja bazowa powinien być całkiem spoko.
Za bardzo o tej godzinie nie chcę mi się tworzyć komentarzy, więc jakbyś miał jakieś pytania to możesz śmiało pisać.

const summary = document.querySelector('#summary');
const items = document.querySelectorAll('.item');

const calcFinalPrice = (items, summary) => {
  const allSum = [...items].reduce((prevItem, currItem) => {
    const product = currItem.querySelector(':scope select');
    const count = currItem.querySelector(':scope input[type="number"]');
    const itemPrice = currItem.querySelector(':scope span');
    
    if (product && count && itemPrice) {
      const price = Number(product[product.selectedIndex].value) * Number(count.value);
      
      itemPrice.textContent = `${price} zł`;
      
      return prevItem + price;
    }
    
    return prevItem;
  }, 0);
  
  if (summary) {
    summary.textContent = `${allSum.toFixed(2)} zł`;
  }
}

for (const item of items) {
  const select = item.querySelector(':scope select');
  const inputNumber = item.querySelector(':scope input[type="number"]');
  
  if (select) {
    select.addEventListener('input', () => calcFinalPrice(items, summary));
  }
  
  if (inputNumber) {
    inputNumber.addEventListener('input', () => calcFinalPrice(items, summary));
  }
}
0

@ledi12: @Xarviel: Dzięki wielkie za pomoc i wskazówki, póki co pytań nie mam bo już zasypiam przed monitorem :D Na pewno dzięki tej bazowej wersji dojdę to tego co potrzebuje. Jeszcze raz dzięki <3

1 użytkowników online, w tym zalogowanych: 0, gości: 1