• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
500 wizyt
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

+1 głos
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')
)
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!
+1 głos
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
komentarz 3 grudnia 2020 przez Nabuchadonozor Gaduła (3,120 p.)
Teraz wszystko wiadomo :D Dziena!

Podobne pytania

0 głosów
2 odpowiedzi 363 wizyt
pytanie zadane 18 czerwca 2021 w Systemy CMS przez Poczatkujaca s z.o.o Obywatel (1,860 p.)
0 głosów
0 odpowiedzi 133 wizyt
0 głosów
1 odpowiedź 267 wizyt
pytanie zadane 29 stycznia 2017 w JavaScript przez MTB Użytkownik (690 p.)

92,452 zapytań

141,261 odpowiedzi

319,074 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...