Kalkulator w JS

Przykład prostego kalkulatora z podstawowymi operacjami matematycznymi: dodawanie, odejmowanie, mnożenie i dzielenie.

Rozwiązanie:

<!DOCTYPE html>
<html>
<head>
<title>Kalkulator</title>
<meta charset="utf-8" />
<style type="text/css">
#calculator {
    background: #eaeaea;
    margin: 0 auto;
    padding: 35px 25px 35px 25px;
    width: 200px;
    text-align: center;
}
#calculator button {
    padding: 10px;
    width: 40px;
}
#calculator input[type="text"] {
    padding: 10px;
    width: 147px;
    margin-bottom: 5px;
}
</style>
<script>
function Calculator(operator) 
{
    var a = document.getElementById('a').value;
    var b = document.getElementById('b').value;  

    switch(operator) 
    {
        case '+':
            var result = parseFloat(a) + parseFloat(b);         
        break;
        case '-':
            var result = parseFloat(a) - parseFloat(b);         
        break;  
        case 'x':
            var result = parseFloat(a) * parseFloat(b);         
        break;  
        case '/':
            var result = parseFloat(a) / parseFloat(b);         
        break;    
    }

    document.getElementById('result').value = '= ' + result;
}
</script>
</head>
<body>
<form id="calculator">
    <input type="text" id="a" placeholder="a" />
    <input type="text" id="b" placeholder="b" />
    <input type="text" id="result" placeholder="=" disabled="disabled" />
    <button type="button" onclick="Calculator(this.innerHTML)">+</button> 
    <button type="button" onclick="Calculator(this.innerHTML)">-</button>
    <button type="button" onclick="Calculator(this.innerHTML)">x</button>   
    <button type="button" onclick="Calculator(this.innerHTML)">/</button>
</form>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Kalkulator</title>

#calculator {

background: #eaeaea;

margin: 0 auto;

padding: 35px 25px 35px 25px;

width: 200px;

text-align: center;

}

#calculator button {

padding: 10px;

width: 40px;

}

#calculator input[type="text"] {

padding: 10px;

width: 147px;

margin-bottom: 5px;

}

</style>

function Calculator(operator)

{

var a = document.getElementById('a').value;

var b = document.getElementById('b').value;

switch(operator)

{

case '+':

var result = parseFloat(a) + parseFloat(b);

break;

case '-':

var result = parseFloat(a) - parseFloat(b);

break;

case 'x':

var result = parseFloat(a) * parseFloat(b);

break;

case '/':

var result = parseFloat(a) / parseFloat(b);

break;

}

document.getElementById('result').value = '= ' + result;

}

</script>

</head>

<body>

</form>

</body>

</html>

Formularz składa się z trzech pól tekstowych (<input type=”text” />): a i b – do wprowadzania wartości liczbowych oraz result , w którym wyświetlane są wyniki operacji matematycznych.

Każdy przycisk (button) reaguje na zdarzenie onClick (kliknięcie), które uruchamia funkcję Calculator. Funkcja pobiera tekst z klikniętego przycisku np: “+” za pomocą this.innerHTML. Instrukcja warunkowa switch sprawdza, który przycisk został kliknięty i wykonuje odpowiednią operację matematyczną. Funkcja parseFloat przetwarza łańcuch znaków (z pól tekstowych) i zwraca liczbę zmiennoprzecinkową.

Zobacz również: “PRZYKŁAD KALKULATORA W REACT JS”

Leave a Comment Cancel Reply