Jak pobrać dane z inputa, tak aby dane z niego można było mnożyć między sobą?

pytanie zadane 30 sierpnia 2023 w JavaScript przez Kamil3224 Nowicjusz (210 p.)

Gdy daje oblicz, to cały czas mam ten sam wynik, cokolwiek bym nie wpisał, nie wiem dla czego. Co zrobić aby" var mar = sum * 8500;" był brane po uwagę jako osobny wynik?

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

   

</head>

<body>

    <section class="calculatorBody">

        <div class="container">

          <div class="column">

            <div class="form-group">

      Podja metraż <input type="number" id="sum"> </inputa><button id="calculate">Oblicz</button>

            </div>

                    <div id="result"></div>

                       </div>        

        </div>

        </div>

        <script>

            function checkNumber(sum) {

    var sum = document.getElementById("sum").value;

   

    var calculate = document.getElementById("calculate");

    var result = document.getElementById("result");

    var mar = sum * 8500;

    var calculatedValue = (sum * 648 / mar * 100).toFixed(2);

    result.innerHTML = calculatedValue;

};

calculate.addEventListener("click", checkNumber);  

        </script>

      </section>

</body>

</html>.

Pozdrawiam

2 odpowiedzi

odpowiedź 30 sierpnia 2023 przez Comandeer Guru (601,590 p.)
wybrane 30 sierpnia 2023 przez Kamil3224

Najlepsza

Robisz działanie typu 648x / 8500x. Takie działanie zwróci zawsze ten sam wynik, bez względu na wartość x – stąd zawsze otrzymujesz ten sam wynik. Przykład: ( 2 * 15 ) / ( 2 * 5 ) – naszym x jest tutaj 2. Jeśli podmienimy to na dowolną inną liczbę, wynik zawsze będzie 3 (proof: ( 1618 * 15 ) / ( 1618 * 5 ) = 3). Kod robi dokładnie to, co zapisałeś – obliczenie jest poprawne, ale prawdopodobnie wzór już nie.

Natomiast co do samego kodu:

element <input> nie ma tagu zamykającego, więc </inputa> jest niepotrzebne (dodatkowo ma literówkę),
fajnie byłoby dodać etykietę do pola formularza,
addEventListener() nie widzi zmiennej calculate z wnętrza funkcji – ta zmienna powinna być poza funkcją. To działa wyłącznie dlatego, że przeglądarki same tworzą zmienne dla elementów z atrybutem id o nazwie takiej, jak wartość tego atrybutu (stąd button#calculate dostał globalną zmienną calculate).

komentarz 30 sierpnia 2023 przez Kamil3224 Nowicjusz (210 p.)

Bardzo dziękuję za odwiedź, poprawiłem błędy. Teraz pytanie czy ta się wyodrębnić te dwa działania, czyli najpierw wykonuję się - sum x 54 x12 , a potem sum x 8500 , tak aby dało się podzielić przez siebie de dwa wyniki. Tak jak pisałem, już porobiłem rozdzielić to na dwa działania w dwóch różnych funkcjach a potem do podzielić. Ale nic to nie zmienia.

komentarz 30 sierpnia 2023 przez Kamil3224 Nowicjusz (210 p.)

Mówią dokładniej, jak przy wpisywaniu jednej liczby do input, pobrać wynik z obydwu działań aby je pomnożyć?

komentarz 30 sierpnia 2023 przez VBService Ekspert (253,420 p.)
edycja 30 sierpnia 2023 przez VBService

@Kamil3224,

najpierw wykonuję się - sum x 54 x12 , a potem sum x 8500 , tak aby dało się podzielić przez siebie de dwa wyniki.

możesz użyć dwóch dodatkowych zmiennych np.

function checkNumber() {
  const sum = document.getElementById("sum").value;
  ...

  const sum1 = sum * 54 * 12;
  const sum2 = sum * 8500;
  result.textContent= (sum1 / sum2).toFixed(2);
}

lub skorzystać z dodatkowych nawiasów, aby ustalic kolejność działań, np.

function checkNumber() {
  const sum = document.getElementById("sum").value;
  ...

  result.textContent= ((sum * 54 * 12) / (sum * 8500)).toFixed(2);
}

w tym przypadku i tak dalej ma zastosowanie wyjaśnienienie podane przez @Comandeer-a;

Robisz działanie typu 648x / 8500x. Takie działanie zwróci zawsze ten sam wynik, bez względu na wartość x – stąd zawsze otrzymujesz ten sam wynik. Przykład: ( 2 * 15 ) / ( 2 * 5 ) – naszym x jest tutaj 2. Jeśli podmienimy to na dowolną inną liczbę, wynik zawsze będzie 3 (proof: ( 1618 * 15 ) / ( 1618 * 5 ) = 3). Kod robi dokładnie to, co zapisałeś – obliczenie jest poprawne, ale prawdopodobnie wzór już nie.

komentarz 30 sierpnia 2023 przez Comandeer Guru (601,590 p.)

Tylko że po raz kolejny – wynik będzie zawsze taki sam, niezależnie od wartości, jaką się wpisze w sum.

komentarz 30 sierpnia 2023 przez VBService Ekspert (253,420 p.)

Zgadza się, ale OP pytał też o

wykonuję się - sum x 54 x12 , a potem sum x 8500 , tak aby dało się podzielić przez siebie de dwa wyniki.

co nie zmienia faktu, że ... (tak jak napisałeś)

obliczenie jest poprawne, ale prawdopodobnie wzór już nie.

komentarz 30 sierpnia 2023 przez Kamil3224 Nowicjusz (210 p.)

No właśnie, jedyne co mogę zrobić to dać liczbę na sztywno i warunki do nich, ale chiałem tego uniknąć.

odpowiedź 30 sierpnia 2023 przez VBService Ekspert (253,420 p.)
edycja 30 sierpnia 2023 przez VBService

Podja metraż <input type="number" id="sum">

jedyne co mogę zrobić to dać liczbę na sztywno i warunki do nich

czy Tobie czasem nie chodzi o coś takiego np.

[ on-line ]

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
      html,
      body {
        margin: 0;
        padding: 0; 
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #f0f0f0; 
        font-family: system-ui, monospace;
      }
      .container {
        background-color: white;
        padding: 2rem;
        border-radius: 1rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      h2, p {
        font-weight: bold;
      }
      label, input, button {
        display: block;
        margin-bottom: .5rem;
      }
      button {
        padding: .5rem 1rem;
        margin: 1rem 0;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: .5rem;
        cursor: pointer;
      }
      button:hover {
        background-color: #0056b3;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Kalkulator objętości pomieszczenia</h2>
      <label for="dlugosc">Długość (m):</label>
      <input type="number" id="dlugosc" min="0" step="0.01" value="1.00">
      <label for="szerokosc">Szerokość (m):</label>
      <input type="number" id="szerokosc" min="0" step="0.01" value="1.00">
      <label for="wysokosc">Wysokość (m):</label>
      <input type="number" id="wysokosc" min="0" step="0.01" value="1.00">
      <button id="oblicz-button">Oblicz</button>
      <p id="wynik">Objętość pomieszczenia: <span>0.00</span>m<sup>3</sup></p>
    </div>

    <script>
      const obliczButton = document.querySelector('#oblicz-button'),
            wynikElement = document.querySelector('#wynik span');

      obliczButton.addEventListener('click', () => {
        const dlugosc = parseFloat(document.querySelector('#dlugosc').value),
              szerokosc = parseFloat(document.querySelector('#szerokosc').value),
              wysokosc = parseFloat(document.querySelector('#wysokosc').value);

        if (!isNaN(dlugosc) && !isNaN(szerokosc) && !isNaN(wysokosc)) {
          const objetoscm3 = dlugosc * szerokosc * wysokosc;
          wynikElement.textContent = objetoscm3.toFixed(2); // metrów sześciennych
        } else {
          // Proszę wprowadzić poprawne wymiary
        }
      });
    </script>
  </body>
</html>

1	komentarz 31 sierpnia 2023 przez Kamil3224 Nowicjusz (210 p.) Okej , już wiem w czym problem. Po prostu wzór obliczeń jest błędny. Czyli tak jak mówił Comandeer na początku. Wielki dzięki za pomoc.