JS - liczba wpisana w inputa nie chce się pokazać w divie

pytanie zadane 23 marca 2017 w JavaScript przez Skorpion Początkujący (360 p.)

Witam, mam problem ze skryptem. Chciałbym wpisać dowolną liczbę w inputa i po kliknięciu sprawdz , liczba ta pokazała się w divie pod spodem. Pomożecie ?

<!DOCTYPE html>
<html="pl">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Comptaive" content="IE=edge,chrome=1"/>
	<script type="text/javascript">
	
		
		var produkt1=document.getElementById("jeden").value;
		produkt1 = parseInt(produkt1);
		var suma=200/100*produkt1;

		function sprawdz()
		{
			document.getElementById("dwa").innerHTML=suma;
		}
		
	</script>
</head>
<body>
	<div id="test">
		<form>
			<input type="text" id="jeden"/> 
			<input type="submit" value="click" onclick="sprawdz()"/>
		</form>
	</div>
	<div id="dwa"></div>
</body>
</html>

2 odpowiedzi

odpowiedź 23 marca 2017 przez xmentor Nałogowiec (49,520 p.)

var produkt1=document.getElementById("jeden").value;

Pobierasz wartość inputa, który nie istnieje - DOM jeszcze nie jest w całości załadowany. Nawet gdybyś przeniósł skrypt przed </body> to i tak nie za fajnie by to działało. Pobierało by wartość z inputa tylko raz i to po wczytaniu dokumentu, czyli wartość była by równa pustemu stringowi. Przerzuć ten kod, który jest poza funkcją, do funkcji.

komentarz 23 marca 2017 przez Skorpion Początkujący (360 p.)

Dzięki już prawie działa z jednym małym szczegółem, wynik prawidłowo się wyświetla pod spodem jednak tylko na urywek sekundy, Jak zrobić by nie znikał tylko był widoczny?

komentarz 23 marca 2017 przez xmentor Nałogowiec (49,520 p.)

type="submit"

zmien typ na button

komentarz 23 marca 2017 przez Skorpion Początkujący (360 p.)

oo i teraz działa tak jak chciałem, dzięki wielkie :)

komentarz 23 marca 2017 przez Skorpion Początkujący (360 p.)

Co mam zmienić by ten kod działał, myślałem że wystarczy dodać podspodem zmienne analogicznie. Jednak to nie działa.

<!DOCTYPE html>
<html="pl">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Comptaive" content="IE=edge,chrome=1"/>
	<script type="text/javascript" src="../Dieta/oblicz.js"></script>
</head>
<body>
	<div id="test">
	<table>
		<tr>
			<td>Nazwa</td><td>Gramów</td><td>Kcal</td><td>Białko</td>
			<td>Węgle</td><td>Tłuszcze</td>
		</tr>
		<tr>
			<td>Produkt1</td><td>100</td><td>232</td><td>20,8</td>
			<td>45</td><td>1,6</td>
		</tr>
		<tr>
			<td>Produkt1</td>
			<td> 
				<input type="text" id="produkt1"/> 
			</td>
			<td id="Prod_Kcal"></td>
			<td id="Prod_B"></td>
			<td id="Prod_W"></td>
			<td id="Prod_T"></td>
			<td>
				<input type="button" value="click" onclick="sprawdz()"/>
			</td>
		</tr>
	
	</table>
	</div>
	<div id="dwa"></div>
	<script type="text/javascript">
	
		unction sprawdz()
{
	var Produkt1=document.getElementById("produkt1").value;
	Produkt1=parseInt(Produkt1);
	var kcal=232/100*Produkt1;
	var bialko=20,8/100*Produkt1;
	var wegle=45/100*Produkt1;
	var tluszcz=1,6/100*Produkt1;
	
	document.getElementById("Prod_Kcal").innerHTML=kcal;
	document.getElementById("Prod_B").innerHTML=bialko;
	document.getElementById("Prod_W").innerHTML=wegle;
	document.getElementById("Prod_T").innerHTML=tluszcz;

}
		
		 
		
	</script>
</body>
</html>

komentarz 23 marca 2017 przez xmentor Nałogowiec (49,520 p.)

unction sprawdz()

komentarz 23 marca 2017 przez Skorpion Początkujący (360 p.)

ups zapomniałem o literce, ale i tak nie chce działać

komentarz 23 marca 2017 przez Skorpion Początkujący (360 p.)

jak jest jedna zmienna to działa, a jak już dwie i więcej to nic się nie pokazuje

komentarz 23 marca 2017 przez xmentor Nałogowiec (49,520 p.)

sprawdź konsole.

komentarz 23 marca 2017 przez xmentor Nałogowiec (49,520 p.)

var bialko=20,8/100*Produkt1;
var tluszcz=1,6/100*Produkt1;

zamiast , stosujemy .

komentarz 23 marca 2017 przez Skorpion Początkujący (360 p.)

są dwa błedy :

Uncaught SyntaxError: Unexpected number
Uncaught TypeError: Cannot read property 'value' of null
at sprawdz (oblicz.js:3)
at HTMLInputElement.onclick (VM63 index.html:29)

komentarz 23 marca 2017 przez Skorpion Początkujący (360 p.)

Dzięki , jesteś wielki . Pozdrowionka

odpowiedź 23 marca 2017 przez mbabane Szeryf (79,280 p.)

Pamiętaj ze kod przez przeglądarkę wykonywany jest, mówiąc najprościej, od góry do dołu. Tak więc, pomijając to co jest objęte w funkcji sprawdz (ponieważ funkcja żeby się wykonała to trzeba ja wywołać), Twoje obliczenie wykonywane jest zanim cala reszta zdąży się załadować.

A jeśli chcesz być lepszym programista js to nie używaj tego onclick - zapoznaj się z poniższym artykułem aby poznać bardziej poprawne metody (nie są trudne):
http://kursjs.pl/kurs/events.php