Kalkulator JavaScript

pytanie zadane 5 marca 2017 w JavaScript przez FYLYPOS94 Nowicjusz (180 p.)

Siema, ostatnio zacząłem się uczyć JS i chciałem zrobić prosty kalkulator. W necie dużo jest o tym ale wszystkie opierają się na input'ach. Ja chciałem zrobić kilka divów, podpisać je i klikając na nie dostajemy liczby, dodajemy itp. To mój pierwszy projekt, zatrzymałem się i nie wiem w sumie co dalej. W tym momencie chce nadać wartości znakom takim jak "+" czy też "*". Jak to zrobić ? Dodaje niżej swój kod js i html.


	window.onload = liczby;
	var tablica = new Array(17);
	
	tablica[0] = "0";
	tablica[1] = "1";
	tablica[2] = "2";
	tablica[3] = "/";
	tablica[4] = "3";
	tablica[5] = "4";
	tablica[6] = "5";
	tablica[7] = "*";
	tablica[8] = "6";
	tablica[9] = "7";
	tablica[10] = "8";
	tablica[11] = "+";
	tablica[12] = "9";
	tablica[13] = "."
	tablica[14] = "=";
	tablica[16] = "DEL";
	tablica[15] = "-";
	var x;
	
	document.getElementById("view").innerHTML = " ";
	function liczby()
	{
		var div = "";
			for (i = 0; i <= 16; i++) 
			{
				
				if (i == 4 || i == 8 || i == 12 || i == 16) div = div + '<div class = "button" style = "clear:both;" onclick="dzialanie(' + tablica[i] + ')" >' + tablica[i] + '</div>';
				else div = div + '<div class = "button" onclick="dzialanie(' + tablica[i] + ')" >' + tablica[i] + '</div>';


			}
			document.getElementById("number").innerHTML = div;
	}

	function dzialanie(x)
	{
		console.log(x);
		console.log(document.getElementById("view").innerHTML);
		if(x === "DEL")
		{
			console.log("isllog");
		}
		else if (x === "+") {
			console.log(document.getElementById("view").innerHTML); + x;

		}
		else
		{
			document.getElementById("view").innerHTML = document.getElementById("view").innerHTML + x;
		}
		
	}

<!DOCTYPE HTML>
<html lang = "pl">
<head>
	<title> Nowe </title>
	
	<link href = "style.css" type = "text/css" rel = "stylesheet">
</head >
<body>
	<div id = "container">
		<div id = "calculate">
			<div id = "view"></div>

			<div id = "number">

			</div>
			
		</div>

	</div>
<script src = "js.js"> </script>
</body>
</html>

2 odpowiedzi

odpowiedź 5 marca 2017 przez bumpMind Gaduła (4,260 p.)

Proponuje żebyś zapoznał się z:

Pierwsze w wygodny sposób pozwoli Ci na wygenerowanie div-ów oraz dodanie do nich odpowiednich klas/formatowania. Drugi można wykorzystać do przechowywania informacji o tym jakiej liczbie/operacji odpowiada kliknięty div.

W pętli możesz stworzyć tak jak do tej pory wszystkie przyciski oraz od razu w JS-ie podpiąć poprzez addEventListener() funkcję obsługującą event 'click'. Funkcja ta może pobierać poprzez data-set informację jaki przycisk został kliknięty, a następnie np poprzez switch/if-y wyberać co robić dalej.

odpowiedź 5 marca 2017 przez Rafał Banaszkiewicz Obywatel (1,110 p.)

hey.

jak chcesz dzialac na divach to lepiej ponadawaj divą atrybut on click czyli

<div onclick='add(4) >4</div>
<div onclick='add(5)'>5</div>
<div onclick='add(6)>6</div>


<script>

var operation = '';

function add(what){
operation += what;
}

</script>

w zmiennej operation masz cale dzialanie i na tym mozesz juz pracowac np funkcja eval