Proszę o pomoc

pytanie zadane 18 kwietnia 2016 w JavaScript przez Iras Obywatel (1,800 p.)

Czy mógłby mi ktoś pomóc robie prosty kalkulator w javascript ale niestety już przy zrobieniu dodawania nie wyświetla mi się wynik w tabelce z wynikiem

<!DOCTYPE HTML>
<html>
<head>

		<meta charset="UTF-8">
		<title>Kalkulator</title>
		<script type="text/javascript" src="Fun.js"></script>
		

</head>
<body>

	<div id="Kalkulator"></div>
	
	<input type="text" id="pole1"/>
	<select name="znak" >
			<option value="+" selected>+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
			<option value="%">%</option>
	</select>
	<input type="text" id="pole2"/>
	=
	<input type="text" id="wynik"/>
	<input type="submit" value="Licz" onclick="policz()"/>
	
	




</body>
</html>

function policz(){
	var liczba1=document.getElementById("pole1").value;	
	var liczba2=document.getElementById("pole2").value;
	var wynik=liczba1+liczba2;
	document.getElementById("wynik").InnerHTML=wynik;
}

2 odpowiedzi

odpowiedź 18 kwietnia 2016 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 19 kwietnia 2016 przez Iras

Najlepsza

Skrypt z <head> przesuń na koniec <body>
Zamiast onclick w HTML stosuj addEventListener w JavaScript

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

W JS linijka nr 2 i 3 (tworzenie i inicjalizacja zmiennych liczba1 oraz liczba2) - pobierasz wartość inputa w postaci stringa a nie liczby. Musisz więc wykonać parsowanie na liczbę:

  var liczba1 = Number(document.getElementById("pole1").value); 
  var liczba2 = Number(document.getElementById("pole2").value);

Powód? Stringi ulegają konkatenacji, czyli połączeniu ze sobą, a nie dodawaniu - tak jak jest to w przypadku liczb.

Linijka 5 - nie .InnerHTML, bo po pierwsze literówka, a po drugie umieszczasz dane w input, a do tego służy atrybut .value

document.getElementById("wynik").value = wynik;

Cały kod, gdybyś nadal nie mógł sobie z tym poradzić :)

https://jsfiddle.net/9jhb1ho9/

komentarz 18 kwietnia 2016 przez Iras Obywatel (1,800 p.)

no dobra dzięki za cenne wskazówki pierwszy raz mam z tym styczność także ciężko trochę. Robiłem to na wzór filmików pana Mirka także mogłem coś pomieszać. Dzięki za pomoc

komentarz 19 kwietnia 2016 przez Iras Obywatel (1,800 p.)

jakiej funkcji mogę użyć do tego żeby zaraz po wyjściu z pola tekstowego wyświetlił mi się komunikat o błędzie ?

komentarz 19 kwietnia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Nasłuchuj zdarzenia blur na tym polu tekstowym (blur jest przeciwieństwem zdarzenia focus).

https://developer.mozilla.org/en-US/docs/Web/Events/blur

Przykład dla Twojego kodu (nasłuchuje "wyjście" z pierwszego inputa):

https://jsfiddle.net/9jhb1ho9/3/

odpowiedź 18 kwietnia 2016 przez Mateusz11 Pasjonat (22,910 p.)

1. Nie używaj onCilck

2. używaj angielskich nazw funkcji

function policz(){
    var liczba1=document.getElementById("pole1").value; 
    var liczba2=document.getElementById("pole2").value;
    var wynik=liczba1+liczba2;
    document.getElementById("wynik").InnerHTML=wynik;
}

<!DOCTYPE HTML>
<html>
<head>
 
        <meta charset="UTF-8">
        <title>Kalkulator</title>
        <script type="text/javascript" src="Fun.js"></script>
         
 
</head>
<body>
 
    <div id="Kalkulator"></div>
     
    <input type="text" id="pole1"/>
    <select name="znak" >
            <option value="+" selected>+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
            <option value="%">%</option>
    </select>
    <input type="text" id="pole2"/>
    =
    <div id="wynik" /></div>
    <input type="submit" value="Licz" onclick="policz()"/>
     
     
 
 
 
 
</body>
</html>