A simple calculator (only add) oop javascript

Question

guys, I have problems with a basic calculator js object only to add numbers input1 + input2 = input3. I have no clue how to display the result for input 1 and 2 in input 3 ( result ). From now I just get value from inputs using show('1'). This is my code

JS

function calculator(){
    this.result = document.getElementById('3');
    this.show = function(id){
        var a =document.getElementById(id).value
        console.log(a);
    }
}

HTML

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
<label for="1">
<input type="text" id = '1'>
</label>
<br><br>
<label for="2">
<input type="text" id = '2'>
</label>
<br><br>  
<label for="3">
<input type="text" id = 3>
</label>
<button onclick="click()">+</button>
  <script src="jss.js"></script>

</body>

</html>

´id`s shouldn't be numbers. The should start with a letter or an underscore. — yunzen
– yunzen, Commented Dec 18, 2018 at 11:59

Giulio Bambini · Accepted Answer · 2018-12-18 12:09:47Z

3

There are several issues in your code. There is no click() defined in your code, it should be calculator(). You have to covert the value before the calculation. Otherwise string concatenation will happen as the default type of input value is string. You can use parseFloat() to do that.

Try the following way:

function calculator(){
    document.getElementById('3').value = parseFloat(document.getElementById('1').value) + parseFloat(document.getElementById('2').value)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="1">
<input type="text" id = '1'>
</label>
<br><br>
<label for="2">
<input type="text" id = '2'>
</label>
<br><br>  
<label for="3">
<input type="text" id = '3'>
</label>
<button onclick="calculator()">+</button>

edited Dec 18, 2018 at 12:09

answered Dec 18, 2018 at 11:58

Giulio Bambini

4,7554 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yunzen · Accepted Answer · 2018-12-18 12:04:58Z

2

function calculator() {
  var item1 = parseFloat(document.getElementById('item1').value);
  var item2 = parseFloat(document.getElementById('item2').value);
  document.getElementById('item3').value = item1 + item2;
}

<input type="number" id="item1" value="0" oninput="calculator()">
<br><br>
<input type="number" id="item2" value="0" oninput="calculator()">
<br><br>
<input type="text" id="item3" disabled>
<button onclick="calculator()">+</button>

answered Dec 18, 2018 at 12:04

yunzen

33.5k13 gold badges79 silver badges114 bronze badges

Comments

Lloyd Nicholson · Accepted Answer · 2018-12-18 11:58:52Z

2

Call your function calculator() rather than click(), which actually isn't a function you've set up.

<button onclick="calculator()">+</button>

answered Dec 18, 2018 at 11:58

Lloyd Nicholson

4843 silver badges12 bronze badges

Comments

Code Maniac · Accepted Answer · 2018-12-18 12:01:38Z

You can do it like this

You need to grab both the input fields. Extract value from them change them to number and than after addition add it to third input.

function calculator(){
    let result = document.getElementById('3');
    let input1 = document.getElementById('1').value;
    let input2 = document.getElementById('2').value;
    let final = Number(input1) + Number(input2);
    result.value = final;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
<label for="1">
<input type="text" id = '1'>
</label>
<br><br>
<label for="2">
<input type="text" id = '2'>
</label>
<br><br>  
<label for="3">
<input type="text" id = 3>
</label>
<button onclick="calculator()">+</button>

</body>

</html>

Collectives™ on Stack Overflow

A simple calculator (only add) oop javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related