Prosty kalkulator js

pytanie zadane 26 października 2017 w JavaScript przez olekjs Gaduła (4,540 p.)

Witam chciałbym zrobić i tutaj zaznaczę BARDZO prosty kalkulator. Zgubiłem się na pewnym etapie (załączam kod). Chciałbym żeby po wpisaniu liczb w okienka 'liczba1' i 'liczba2' i wciśnięciu "dodaj" i "odejmij" pokazywał sie wynik w divie "wynik"

HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
        <meta charset="utf-8" />
        <title>KALKULATOR</title>
        <script type="text/javascript" src="script.js"></script>
       
</head>
<body>
        <form>
    <input type="text" name="liczba1">
    <input type="text" name="liczba2"><br/>   <br/>
   

    <input type="button" onclick="dodawanie()" value="Dodaj">

    <input type="button" onclick="odejmowanie()" value="Odejmij">
    
            <br/>
            <br/>
  

        <div id="wynik">
            </div> 
        </form>


   




</body>
</html>

JS:


  var liczba1 = document.getElementByName("liczba1").value;
  var liczba2 = document.getElementByName("liczba2").value;
  
  
  
  


function dodawanie(){

  
  

    document.getElementById("wynik").innerHTML = //tutaj co? dobrze robię?

}

1 odpowiedź

odpowiedź 26 października 2017 przez Lrror Bywalec (2,720 p.)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kalkulator</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>

<div>
<form>
<input type="number" id="l1"/><br/>
<input type="number" id="l2" /><br/>
</form>
<button id="dodaj">Dodaj</button> | <button id="odejmij">Odejmij</button>
</div>
<br/>
<div id="wynik"></div>

<script type="text/javascript">
$(document).ready(function(){

$("#dodaj").click(function(){
  $("#wynik").html(parseInt($("#l1").val()) + parseInt($("#l2").val()));
});
$("#odejmij").click(function(){
  $("#wynik").html(parseInt($("#l1").val()) - parseInt($("#l2").val()));
});

});
</script>
</body>
</html>

Taki kod mi powstał. Poćwicz jquery kiedyś nie odłączne w dzisiejszych czasach.

komentarz 26 października 2017 przez olekjs Gaduła (4,540 p.)

No właśnie mi zależy na czystym kodzie JavaScript. Może i jest to droga okrężna ale chciałbym nią pójść

komentarz 26 października 2017 przez zgrybus Pasjonat (24,860 p.)

Ehh.. ludzie :) Poćwicz jQuery do zbudowania kalkulatora.. :)

1	komentarz 26 października 2017 przez olekjs Gaduła (4,540 p.) A gdybym chciał w ramach nauki napisać w js? ;) Nie chce ćwiczyć jQuery, postawiłem sobie za zadanie napisać to i zrozumieć w js..

komentarz 26 października 2017 przez zgrybus Pasjonat (24,860 p.)

Przeczytaj jeszcze raz mój komentarz, może zrozumiesz o co w nim chodzi, ehh..

komentarz 26 października 2017 przez olekjs Gaduła (4,540 p.)

Gdybyś chciał zakończyć rozmowę napisałbyś że się nie da w js.

Chyba się nie rozumiemy :/

komentarz 26 października 2017 przez zgrybus Pasjonat (24,860 p.)

Dobra, wytłumaczę Ci. Mój komentarz tyczył się odpowiedzi użytkownika Lrror, który zasugerował Ci zrobienie tej rzeczy w jQuery na co parsnąłem troszkę śmiechem, ponieważ używanie jQuery do implementacji kalkulatora to czysty żart. tldr: Zrób to w czystym JS. PS. Skoro da się w jQuery to da się w JS, no bo nie wiem, jQuery to JS?

komentarz 26 października 2017 przez olekjs Gaduła (4,540 p.)

okk nie zauważyłem innego użytkownika w tej rozmowie, bój błąd. Wracając do kalkulatora w JS

komentarz 26 października 2017 przez lukasz12815 Nowicjusz (100 p.)

Może coś takiego:

<!DOCTYPE HTML>
<html lang="pl">
	<head>
		<title> JS 2.7 </title>
		<meta charset="utf-8">
	</head>
	
	<body>
		<header> Prosty Kalkulator </header>
		<input type="text" id="pole_1">
		<select id="pole_2">
			<option value=""> </option>
			<option value="+"> + </option>
			<option value="-"> - </option>
			<option value="*"> * </option>
			<option value="/"> / </option>
			<option value="%"> % </option>
		</select>
		<input type="text" id="pole_3">
		<input type="submit" value="Wynik" onclick="Wynik()">
		<input type="text" id="pole_4">
		
		<script>
			var POLE_1 = document.getElementById('pole_1');
			var POLE_2 = document.getElementById('pole_2');
			var POLE_3 = document.getElementById('pole_3');
			var POLE_4 = document.getElementById('pole_4');
			
			function Dodawanie(a, b){
				return a + b;
			}
			function Odejmowanie (a, b){
				return a - b;
			}
			function Mnozenie (a, b){
				return a * b;
			}
			function Dzielenie (a , b){
				if (b == 0) return 'Nie można dzielić przez 0!'; else return a / b ;
			}
			function Modulo (a, b){
				return a % b;
			}
			function Wynik(){
				var w1 = Number(POLE_1.value);
				var w2 = Number(POLE_3.value);
				var cos = String(POLE_2.value);
			
				if (cos == "") POLE_4.value = "Brak danych";
				else if (cos == "+") POLE_4.value = Dodawanie(w1, w2);
				else if (cos == "-") POLE_4.value = Odejmowanie(w1, w2);
				else if (cos == "*") POLE_4.value = Mnozenie(w1, w2);
				else if (cos == "/") POLE_4.value = Dzielenie(w1, w2);
				else if(cos == "%") POLE_4.value = Modulo(w1, w2);
			}
			
			
		</script>
	</body>
</html>

komentarz 26 października 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Jak stosujesz nazewnictwo z wielkich znaków sugerujące stałą to lepiej zastosować const zamiast var, zresztą o var lepiej w ogóle już dzisiaj zapomnieć.

Nazwy zmiennych i funkcji lepiej pisać po angielsku.

W instrukcjach warunkowych IF lepiej zawsze stosować klamerki, nawet dla jednego polecenia. Kiedyś stwierdzisz, że jednak trzeba rozbudować polecenia dla danego warunku i zrobi się problem, dla początkującego trudny do zlokalizowania.

Warto być nieco bardziej elastycznym, spróbuj wpisać np. 4,01 + 5,05. Dostaniesz NaN, ale jeśli w roli separatora dasz kropki to będzie oki. Można to łatwo uwzględnić np. prostym regexp:

replace( /,/, '.' ); //zamień "," na "."

Oczywiście założenie, że pojawi się tylko jeden przecinek. Ewentualnie można to zabezpieczyć przechwytując wpisywane znaki i w przypadku próby podania drugi raz przecinka/kropki dać info o błędzie. Ale to taka propozycja zabawy w przyszłości żeby pouczyć się JS i walidacji :)

Zamiast walić mnóstwo elseif lepiej po prostu skorzystać z instrukcji case - jest to znacznie czytelniejsze i szybsze.