Hej!
Robię mały projekcik i natrafiłem na problem .
Natrafiam na błąd w konsoli przeglądarki:
Zrzuty ekranu i kod błędu
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;
}