Jak wyciągnąć dane z każdego elementu danej klasy?

Question

Cześć Wam,

nie mogę nic znaleźć na temat wyciągania wartości z wszystkich elementów danej klasy.

Dokładniej mając:

<input type="number" class="numberToAdd"/> (ostatecznie może ich być nawet 1000)

Chcę napisać funkcję, z której po kolei wyciągnę z każdego inputa zawartość (liczba jaka jest tam wpisana) i wszystko zsumuje do jednej zmiennej. Ma ktoś może jakiś pomysł?

Comments

Ostatecznie może ich być nawet tysiąc, ponieważ tworzone są dynamicznie, zależnie od użytkownika strony.

Answer 1

function getSumFromInputs (inputs) {
  let sum = 0
  
  for (let i = 0; i < inputs.length; i++) {
    sum += parseFloat(inputs[i].value) || 0
  }
  
  return sum
}

const sum = getSumFromInputs(
  document.querySelectorAll('.jakaś-klasa')
)

Comments

Potrzebuję chwili, by to opanować i przetłumaczyć na swój język w głowie, zaraz napiszę jak wyszło ostatecznie aczkolwiek już mi jakiś error w konsoli wyskoczył ale pobawię się i ostatecznie poproszę o pomoc. Dziękuję ślicznie!

---

Kiedy dodaję to do kodu co mi podesłałeś:

<script>
		function addRows() {
			var table = document.getElementById("myTable");
			var row = table.insertRow(2);

			var cell = []
			
			for(i = 0; i<6; i++){
				cell[i] = row.insertCell(0);
				
				if(i<3){
					cell[i].innerHTML = '<input type="number" class="numberToAdd"/>';
				} else {
				    cell[i].innerHTML = '<textarea></textarea>';
				}	
			}
		}
		
		function getSumFromInputs (inputs) {
			let sum = 0;
			
			for (let i = 0; i < inputs.length; i++) {
				sum += parseFloat(inputs[i].value) || 0;
			}
			
			return sum;
		}
			
			const sum = getSumFromInputs(
			document.querySelectorAll('.numberToAdd');
		)
</script>

to przestaje mi działać button od dodawania linii wierszów xD Ale w konsoli jeszcze error "missing syntax )" więc pewnie to jego sprawka :D

---

bez średnika w 30 linijce - jak coś to powinien być w 31

---

const sum = getSumFromInputs(document.querySelectorAll('.numberToAdd'));

tak można zapisać tamą linijkę, ale imo rozbicie jej na 3 jest czytelniejsze

---

Aaa haha ale walnąłem gape :V Racja, o wiele milsze dla oka ;) Mam teraz mały problem, dałeś mi rozkmine życiową, jak mam to wywołać teraz w onclick tego buttona jeśli trzeba wartość przekazać dla getSumFromInputs(inputs)? Nigdy nie robiłem jeszcze funkcji z przekazywaniem wartości w JS, nowy jestem, proszę wybaczyć :D

---

Zawsze możesz stworzyć oddzielną funkcję "onSumButtonClick"

<button onclick="onSumButtonClick">

i w niej wywołać potrzebne metody

---

Właśnie zrobiłem takie coś: (addRows() na button SUMUJ się aktywuje)

	<script>
		function addRows() {
			var table = document.getElementById("myTable");
			var row = table.insertRow(2);

			var cell = []
			
			for(i = 0; i<6; i++){
				cell[i] = row.insertCell(0);
				
				if(i<3){
					cell[i].innerHTML = '<input type="number" class="numberToAdd"/>';
				} else {
				    cell[i].innerHTML = '<textarea></textarea>';
				}	
			}
		}
		
		function addNumbers(){
			const suma = getSumFromInputs(
			document.querySelectorAll('.numberToAdd')
			);
			
			document.getElementById("total").innerHTML = getSumFromInputs(suma);
		}
		
		function getSumFromInputs (inputs) {
			let sum = 0;
			
			for (let i = 0; i < inputs.length; i++) {
				sum += parseFloat(inputs[i].value) || 0;
			}

			return sum;
		}
		
		const sum = getSumFromInputs(
			document.querySelectorAll('.numberToAdd')
		);
			
</script>

i zwraca mi wartość 0. Sprawdzę console.log() 'iem gdzie mi to się psuje

---

Bardzo dziwne zjawisko:

function getSumFromInputs (inputs) {
			let sum = 0;
			
			for (let i = 0; i < inputs.length; i++) {
				sum += parseFloat(inputs[i].value) || 0;
				console.log(sum);
			}
			console.log(sum);
			
			return sum;
		}

log w pętli działa wyśmienicie. Log po pętli wykonuje się dwa razy, na początku wartość taka jaka powinna być, a potem zero, wiesz może dlaczego?

---

jeśli tego log'a z pętli wywale, ten drugi zostanie, to przy odświeżeniu strony od razu mi się aktywuje ten log, potem wynik dobry a potem znowu 0 :(

---

niepotrzebnie wywołujesz funkcję sum w linijkach 37-39

---

Racja, w funkcji addNumbers() niepotrzebnie aż też dwa razy wywołałem funkcję getSumFromInputs(inputs) :V Jesteś wielki mistrzu! Dzięki śliczne!

Answer 2

document.querySelectorAll + Array.prototype.reduce (z uprzednim "zrzutowaniem" listy elementów na tablicę)?

Jeśli elementy są dodawane dynamiczne na jakiś event lub akcję użytkownika, to podaj więcej szczegółów.

Comments

Za pomocą przycisku dodaj linie wierszy tworzy się linia wierszy składająca się z <textarea></textarea> (pierwsze trzy) oraz <input type="number" class="numberToAdd" /> (kolejne trzy).

Teraz chciałbym, żeby po kliknięciu przycisku "SUMUJ", te wszystkie wartości z pól o klasie "numberToAdd" zsumowały się do zmiennej (każda kolumna osobno) i wypisały w wierszach na samym dole.

Dzięki za zainteresowanie ;)

 

<!DOCTYPE html>

<html>

<head>
    <title>WYCENA</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="print.css" media="print">
    <meta charset="utf-8" />
</head>

<body>	
	<div id="wrapper">
	    <div id="topbar">TWORZENIE WYCENY</div>
		<div id="content">
		<div class="divBtn">
			<button class="btn" onclick="addRows()">DODAJ LINIE WIERSZY</button>
		</div>
		
			<table id="myTable">
				<form>
			        <tr>
					    <th colspan="6" id="thSubject">
							<div>WYCENA NA:</div>
							<textarea id="subjectArea" cols="81"></textarea>
						</th>
					</tr>
					<tr>
					    <th class="thMain">PRACE REMONTOWE</th>
					    <th class="thMain">CENA JEDNOSTKOWA (ZŁ)</th>
					    <th class="thMain">ILOŚĆ (METRY) </th>
					    <th class="thMain">MATERIAŁ (ZŁ)</th>
					    <th class="thMain">ROBOCIZNA (ZŁ)</th>
					    <th class="thMain">SPRZĘT (ZŁ)</th>
					</tr>
					<tr>
					    <td colspan="3" id="tdTotal">RAZEM</td>
						<td id="total"></td>
						<td></td>
						<td></td>
					</tr>
				</form>
			</table>
			
			<div class="divBtn">
				<button class="btn" onclick="addNumbers()">SUMUJ</button>
			</div>
			
		</div>
	</div>
	
	<script>
		function addRows() {
			var table = document.getElementById("myTable");
			var row = table.insertRow(2);

			var cell = []
			
			for(i = 0; i<6; i++){
				cell[i] = row.insertCell(0);
				
				if(i<3){
					cell[i].innerHTML = '<input type="number" id="numberToAdd"/>';
				} else {
				    cell[i].innerHTML = '<textarea></textarea>';
				}	
			}
		}
		
		function addNumbers(){  // KMINIE COS ALE NIC NIE WYCHODZI
 			var total = 0;
			var list = document.getElementById("myTable");
			console.log(list.getElementsByClassName("numberInput").value);
			
			//document.getElementById("total").innerHTML = total;
		}
</script>
	
</body>

</html>

 

---

(Ja się doczepię języka polskiego :D Metry są policzalne - powinno być "liczba metrów" zamiast "ilość metrów")

---

Ale mnie teraz zagiąłeś :V Jak tak myślę nad tym wyrażeniem ilość metrów a liczba metrów, to wydaje mi się, że to się niczym nie różni, aczkolwiek zaufam Ci, nie chce mi się szukać regułek. Dzięki! :D

---

ilość do niepoliczalnych - na przykład ilość cukru, ilość wody, ilość pieniędzy

liczba do policzalnych - na przykład liczba książek, liczba litrów, liczba dwuzłotówek

---

Teraz wszystko wiadomo :D Dziena!