HTML/JS - dodawanie zestawów pól i obliczanie iloczynu

pytanie zadane 26 maja 2020 w JavaScript przez Bartosz Tobiasz Nowicjusz (240 p.)

Hej!

Robię mały projekcik i natrafiłem na problem .

Natrafiam na błąd w konsoli przeglądarki:

Otóż chcę, aby dodawane były kolejne zestawy pól za pomocą przycisku, w których po wpisaniu przez użytkownika został obliczony iloczyn.

Mam problem jak zrobić, aby id kolejnych pól były inne od poprzednich.

Byłbym wdzięczny za odpowiedź .

Jeżeli coś jest niejasne PISZ. Proszę o wybaczenie.. jestem początkujący w tej materii .

<html>
    <head>
        <meta charset="utf-8" />
        <title>KALKULATOREK</title>
        <script src="kalkulatorek.js"></script>
   </head>

   <body>

        <!-- div plansza przchowuje "przycisk" oraz zestawy pól -->
        <div id="plansza"></div>

        <!-- przycisk służący do dodawania kolejncyh zestawów liczb -->
        <input type="submit" id="przycisk" value="DODAJ" onclick="dodac()">

   </body>
</html>

var tresc = "";
var pole = "pole";
var j = 0;
var suma = 1;
var POLE = [];

//funkcja dodac() dodaje kolejne zestawy pól
function dodac()
{
    //pętla for dodaje kolejne pola
    for (var i=0; i<=3; i++)
	{   
        //każde pole jest typu "number" i odwołuje się do funkcji licz()
        tresc = tresc + '<input class="pola" type="number" step=0.01 onkeyup="licz()" id="'+pole+i+'">';
        document.getElementById("plansza").innerHTML = tresc;
    }

        //pole wynik
        tresc = tresc + '<input class="pola" type="text" id="wynik">';
        document.getElementById("plansza").innerHTML = tresc;

        //powoduje odstęp od kolejnych zestawów pól
        tresc = tresc + '<br>' + '<br>';
        document.getElementById("plansza").innerHTML = tresc;

    //zmienna j liczy ilość zestawów pól i pokazuje to w konsoli przeglądarki
    j++;
    console.log(j);
}

//funkcja licz() wylicza iloczyn liczb znajdujących się w <input> o id kolejno: pole0, pole1, pole2, pole3
function licz()
{   

    //pętla for pobiera wartości z pól i wpisuje je do tablicy POLE[] oraz wylicza iloczyn
    for (var i = 0; i <= 3; i++) 
    {
        POLE[i] = document.getElementById(pole[i]).value;
        iloczyn = iloczyn * POLE[i];
    }

        //wypisywanie iloczynu w kosolii przeglądarki
       console.log(iloczyn);
       document.getElementById("wynik").value = iloczyn;
}

1 odpowiedź

odpowiedź 26 maja 2020 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 26 maja 2020 przez Bartosz Tobiasz

Najlepsza

Przyczyną błędu jest to, że w 38 linii próbujesz pobrać element o ID "p" (przy pierwszej iteracji, na której skrypt rzuca błędem) - zmienna pole zawiera string o wartości "pole" a kolejne wartości zmiennej i odczytują kolejne znaki z tego stringa. Zamiast tego powinieneś do metody document.getElementById podawać parametr pole + i.

Poza tym, zmienna iloczyn nie jest przez Ciebie deklarowana, więc w 39 linii dostaniesz błąd ReferenceError. Stwórz więc ją np. nad pętlą.

I pamiętaj, że jeśli będziesz chciał sumować wartości, to rzutuj pobrane wartości z obiektów DOM na liczbę, ponieważ one są zwracane jako typ string. Przy m.in. mnożeniu tego problemu akurat nie ma, bo pod spodem wartość zostaje rzutowana na liczbę.

komentarz 26 maja 2020 przez Bartosz Tobiasz Nowicjusz (240 p.)

Uff... dzięki wielkie. Naprawdę pomocne i pouczające.

Super, że wytłumaczyłeś to w zrozumiały dla mnie sposób. Dzięki!
Zaczynam zauważać potencjał forum. Ktoś inny dostrzeże błąd w 1 sekundę, a ktoś inny będzie się głowił nad tym 1 godzinę.

komentarz 26 maja 2020 przez ScriptyChris Mędrzec (190,190 p.)

Jeśli analizujesz kod zbyt długo, to często nie zauważasz pewnych rzeczy, które ktoś inny może zauważyć szybciej, bo spojrzy "na świeżo". Tutaj często pomaga oderwanie się od kodu i zajęcie się czymś innym, a rozwiązanie lub potencjalne sposoby rozwiązania czasem same wpadają do głowy. :) Oczywiście, kwestia doświadczenia ma znaczenie, ale z tego co zauważyłem, to wspomniana zasada "spojrzenia na świeżo" działa na różnych poziomach trudności problemu.