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

0 głosów
115 wizyt
pytanie zadane 3 grudnia 2020 w JavaScript przez Nabuchadonozor Bywalec (2,550 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 Bywalec (2,550 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 argeento VIP (109,280 p.)
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 Bywalec (2,550 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 Bywalec (2,550 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 Bywalec (2,550 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 argeento VIP (109,280 p.)
niepotrzebnie wywołujesz funkcję sum w linijkach 37-39
1
komentarz 3 grudnia 2020 przez Nabuchadonozor Bywalec (2,550 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 (166,060 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 Bywalec (2,550 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 argeento VIP (109,280 p.)
(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 Bywalec (2,550 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 argeento VIP (109,280 p.)
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
1
komentarz 3 grudnia 2020 przez Nabuchadonozor Bywalec (2,550 p.)
Teraz wszystko wiadomo :D Dziena!

Podobne pytania

0 głosów
2 odpowiedzi 93 wizyt
pytanie zadane 18 czerwca w Systemy CMS przez Poczatkujaca s z.o.o Obywatel (1,860 p.)
0 głosów
0 odpowiedzi 76 wizyt
0 głosów
1 odpowiedź 193 wizyt
pytanie zadane 29 stycznia 2017 w JavaScript przez MTB Użytkownik (690 p.)
Porady nie od parady
Nie wiesz jak poprawnie zredagować pytanie lub pragniesz poznać którąś z funkcji forum? Odwiedź podstronę Pomoc (FAQ) dostępną w menu pod ikoną apteczki.FAQ

85,242 zapytań

134,056 odpowiedzi

297,249 komentarzy

56,332 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...