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

pytanie zadane 3 grudnia 2020 w JavaScript przez Nabuchadonozor Gaduła (3,120 p.)
zamknięte 3 grudnia 2020 przez Nabuchadonozor

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ł?

komentarz zamknięcia: argeento mistrz

komentarz 3 grudnia 2020 przez Nabuchadonozor Gaduła (3,120 p.)

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

2 odpowiedzi

odpowiedź 3 grudnia 2020 przez niezalogowany
wybrane 3 grudnia 2020 przez Nabuchadonozor

Najlepsza

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')
)

Pokaż 6 poprzednich komentarzy

komentarz 3 grudnia 2020 przez Nabuchadonozor Gaduła (3,120 p.)

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

komentarz 3 grudnia 2020 przez Nabuchadonozor Gaduła (3,120 p.)

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?

komentarz 3 grudnia 2020 przez Nabuchadonozor Gaduła (3,120 p.)

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 :(

komentarz 3 grudnia 2020 przez niezalogowany

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

komentarz 3 grudnia 2020 przez Nabuchadonozor Gaduła (3,120 p.)

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

odpowiedź 3 grudnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

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.

komentarz 3 grudnia 2020 przez Nabuchadonozor Gaduła (3,120 p.)

zdjęcie

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>

komentarz 3 grudnia 2020 przez niezalogowany

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

komentarz 3 grudnia 2020 przez Nabuchadonozor Gaduła (3,120 p.)

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

1	komentarz 3 grudnia 2020 przez niezalogowany 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