Cześć wszystkim
Prosiłbym o pomoc odnośnie kodu JavaScript. Chodzi o projekt desktopowego kalkulatora. Mój kod jest jeszcze nieskończony, a zatem jest napisany "tak żeby działał", a dopiero na końcu zajmę się jego "pięknem".
Kalkulator ma wykonywać działania na dwóch liczbach o maksymalnych rozmiarach 12 cyfr.
Co do pomocy o jaką bym Was prosił to chodzi o zapisanie liczby do zmiennej. Brzmi łatwo, ale nie mogę sobie poradzić z tym problemem od około trzech dni. Ciężko wytłumaczyć to bez przykładu, a zatem udostępniam obrazek z wytłumaczeniem poniżej niego.
Liczby 66 oraz 32 chciałbym zapisać do dwóch oddzielnych zmiennych, na których później mógłbym spokojnie wykonywać działania. Oto kod html, css i js kalkulatora.
HTML
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Kalkulator</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="container">
<div id="main"><div id="results"><div class="square"><span id="first">0</span></div><div class="square"><span id="second"></span></div><div class="square"><span id="third"></span></div><div class="square"><span id="fourth"></span></div><div class="square"><span id="fifth"></span></div><div class="square" ><span id="sixth"></span></div><div class="square"><span id="seventh"></span></div><div class="square"><span id="eighth"></span></div><div class="square"><span id="ninth"></span></div><div class="square"><span id="tenth"></span></div><div class="square"><span id="eleventh"></span></div><div class="square"><span id="twelfth"></span></div></div>
<div class="firstButton"><div class="write">CE</div></div><div class="firstButton"><div class="write">C</div></div><div class="firstButton"><div class="write">C</div></div><div class="firstButton" id="division"><div id="encje" clas="write">÷</div></div>
<div class="restOfButtons">7</div><div class="restOfButtons">8</div><div class="restOfButtons">9</div><div class="restOfSpecialButtons" id="multiplication"><div id="encje" class="write">×</div></div>
<div class="restOfButtons">4</div><div class="restOfButtons">5</div><div class="restOfButtons">6</div><div class="restOfSpecialButtons" id="subtraction"><div id="encje" class="write">−</div></div>
<div class="restOfButtons" id="one">1</div><div class="restOfButtons">2</div><div class="restOfButtons">3</div><div class="restOfSpecialButtons" id="addition"><div id="encje" class="write">+</div></div>
<div class="restOfSpecialButtons" id="element"><div class="restOfWrite">√</div></div><div class="restOfButtons" id="zero">0</div><div class="restOfSpecialButtons" id="comma"><div class="restOfSpecialWrite">,</div></div><div class="restOfSpecialButtons" id="equal"><div id="encje" class="write">=</div></div>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>
CSS
body
{
margin: 0;
}
#container
{
margin-left: auto;
margin-right: auto;
width: 1000px;
text-align: center;
position: relative;
height: 800px;
}
#main
{
position: absolute;
width: 340px;
border: 0.2px solid #9898e0;
top: 100px;
left: 329px;
-webkit-box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.75);
}
#results
{
height: 70px;
font-size: 50px;
margin-top: 10px;
}
#firstButtons
{
border: 2px solid yellow;
height: 40px;
}
#mainButtons
{
border: 2px solid red;
height: 277px;
}
.firstButton
{
float: left;
width: 85px;
height: 50px;
font-family: arial;
text-align: center;
border-top: 1px solid #e3e3e5;
margin-top: 10px;
}
.firstButton:hover
{
background-color: #e0e0e5;
cursor: pointer;
}
.write
{
margin-top: 16px;
}
#encje
{
margin-top: 8px;
font-size: 30px;
font-weight: normal;
}
.restOfButtons
{
float: left;
width: 85px;
height: 50px;
font-family: arial;
text-align: center;
background-color: #f2f2f4;
font-weight: bold;
font-size: 23px;
}
.restOfSpecialButtons
{
float: left;
width: 85px;
height: 50px;
font-family: arial;
text-align: center;
background-color: #f2f2f4;
font-weight: bold;
font-size: 23px;
}
.restOfWrite
{
margin-top: 10px;
}
.restOfButtons:hover
{
background-color: #e0e0e5;
cursor: pointer;
}
.restOfSpecialButtons:hover
{
background-color: #e0e0e5;
cursor: pointer;
}
.square
{
width: 15px;
height: 25px;
margin-top: 20px;
display: inline-block;
border: 1px solid white;
font-size: 30px;
text-align: center;
}
Zdaję sobie sprawę, że niektóre klasy różnią się jedynie nazwą, ale chodziło mi o to, aby wyróżnić je w kodzie JS i móc je pobrać z DOM.
JS (niedokończony, w tym kodzie występuje problem)
// licznik
var count = 0;
// Jeśli strona się wczyta to wywołaj funkcję
window.onload = function() {
var buttons = document.getElementsByClassName("restOfButtons");
for(var i = 0; i < buttons.length; i++)
{
buttons[i].onclick = showSigns;
}
}
//--------------------------------------------------------GŁÓWNA FUNKCJA------------------------------------------------WYWOŁANA PO KLIKNIĘCIU---------------------------------------------------------------------------
function showSigns(eventObj)
{
// do zmiennej button przypisuje aktualnie kliknięty przycisk
var button = eventObj.target;
// Zmienne przechowujące divy, do których wpisywane są liczby. Divy te obecne są w wyświetlaczu.
var first = document.getElementById("first");
var second = document.getElementById("second");
var third = document.getElementById("third");
var fourth = document.getElementById("fourth");
var fifth = document.getElementById("fifth");
var sixth = document.getElementById("sixth");
var seventh = document.getElementById("seventh");
var eighth = document.getElementById("eighth");
var ninth = document.getElementById("ninth");
var tenth = document.getElementById("tenth");
var eleventh = document.getElementById("eleventh");
var twelfth = document.getElementById("twelfth");
// Rezerwacja pamięci na "przyciski specjalne takie" jak np. mnożenie
var specialButtons = document.getElementsByClassName("restOfSpecialButtons");
// zmienna przechowująca przycisk mnożenia
var multiplication = document.getElementById("multiplication");
// zmienna przechowująca przycisk odejmowania
var subtraction = document.getElementById("subtraction");
// zmienna przechowująca przycisk dodawania
var addition = document.getElementById("addition");
// zmienna przechowująca przycisk pierwiastka
var element = document.getElementById("element");
// zmienna przechowująca przycisk przecinka
var comma = document.getElementById("comma");
// zmienna przechwoująca przycisk równości
var equal = document.getElementById("equal");
// Zmienna specialButtons przechowuje przyciski o klasie restOfSpecialButtons
for(var i = 0; i < specialButtons.length; i++)
{
// za każdym razem jak kliknę specjalny przycisk kalkulatora to wyzeruj cyfry w wyświetlaczu
specialButtons[i].onclick = numbersOfZero;
}
// Funkcja służąca do zwiększania licznika
function countItteration()
{
count++;
}
// Jeśli klikniesz przycisk to zwiększ licznik o 1 wywołując funkcję countItteration
if(button)
{
countItteration();
}
function counter()
{
// W zależności od stanu licznika uzupełnij wyświetlacz kalkulatora o liczby obecne na przyciskach
if(count === 1)
{
first.innerHTML = button.innerHTML;
}
if(count === 2)
{
second.innerHTML = button.innerHTML;
}
if(count === 3)
{
third.innerHTML = button.innerHTML;
}
if(count === 4)
{
fourth.innerHTML = button.innerHTML;
}
if(count === 5)
{
fifth.innerHTML = button.innerHTML;
}
if(count === 6)
{
sixth.innerHTML = button.innerHTML;
}
if(count === 7)
{
seventh.innerHTML = button.innerHTML;
}
if(count === 8)
{
eighth.innerHTML = button.innerHTML;
}
if(count === 9)
{
ninth.innerHTML = button.innerHTML;
}
if(count === 10)
{
tenth.innerHTML = button.innerHTML;
}
if(count === 11)
{
eleventh.innerHTML = button.innerHTML;
}
if(count === 12)
{
twelfth.innerHTML = button.innerHTML;
}
// zwróć jako wynik działania liczby z wyświetlacza
return (first.innerHTML + second.innerHTML + third.innerHTML + fourth.innerHTML + fifth.innerHTML + sixth.innerHTML + seventh.innerHTML + eighth.innerHTML + ninth.innerHTML + tenth.innerHTML + eleventh.innerHTML + twelfth.innerHTML);
}
// zmiennej number przypisz wynik wykonania funkcji counter
var number = counter();
// funkcja numbersOfZero służy wyzerowaniu wyświetlacza kalkulatora i do resetu licznika, by do zmiennej number2 móc zapisywać NOWĄ liczbę
function numbersOfZero()
{
first.innerHTML = "0";
second.innerHTML = "";
third.innerHTML = "";
fourth.innerHTML = "";
fifth.innerHTML = "";
sixth.innerHTML = "";
seventh.innerHTML = "";
eighth.innerHTML = "";
ninth.innerHTML = "";
tenth.innerHTML = "";
eleventh.innerHTML = "";
twelfth.innerHTML = "";
count = 0;
}
var number2 = counter();
console.log(number);
console.log(number2);
}
Problem pojawia się w ostatniej linijce. Program działa tak, że gdy kliknę któryś z "przycisków specjalnych" takich jak np. mnożenie, dodawania itp. zeruje się wyświetlacz i licznik, a w zależności od wartości licznika jest wykonywana funkcja counter na podstawie, której uzupełniany jest wyświetlacz.
Funkcja ta zwraca wnętrza każdego z divów obecnych w wyświetlaczu, (logika wyświetlacza opiera się o wnętrza tych divów, do których zapisywane są wygenerowane kliknięciami w przyciski liczby) a zatem według mojego toku myślenia po kliknięciu "przycisku specjalnego" gdy wyzeruje się wyświetlacz i ZRESETUJE LICZNIK, funkcja counter powinna być wywołana jeszcze raz i zapisywać NOWE liczby do zmiennej number2, tymczasem do tej zmiennej zapisywany jest poprzedni wynik wywołania funkcji counter, a zatem wartość, która zapisana jest w zmiennej number.
Więc jeśli pomnożę number * number2 uzyskam potęgę zmiennej number. Myślę nad tym jak zrobić, aby liczba wpisywana do kalkulatora po zerowaniu licznika i wyświetlacza (za pomocą funkcji numbersOfZero) była zapisywana bezpośrednio do zmiennej number2. Wtedy do number i number2 byłyby przypisywane inne liczby, a o to właśnie mi chodzi.
Czy ktoś byłby w stanie rozwiązać ten problem?
Oczywiście jeśli coś jest niejasne prosiłbym o informację, postaram się wyjaśnić.