How to combine digits to a number

user_12584860 0
Viewed 84

I'm trying to make a calculator on my website so i'm using HTML & Javascript . I added some buttons and when i click it changes the number and it's not adding it after the last element.

Here's what it looks like :

As you can see it just replaces the number.

Here's my code :

function onClick(num) {
  document.getElementById('number').innerHTML = num;
}
<div>
  <p>Enter number(s) :
    <a id="number"></a>
  </p>

  <div>
    <button type="button" onclick="onClick(7)">7</button>
    <button type="button" onclick="onClick(8)">8</button>
    <button type="button" onclick="onClick(9)">9</button>
  </div>

  <div>
    <button type="button" onclick="onClick(4)">4</button>
    <button type="button" onclick="onClick(5)">5</button>
    <button type="button" onclick="onClick(6)">6</button>
  </div>

  <div>
    <button type="button" onclick="onClick(1)">1</button>
    <button type="button" onclick="onClick(2)">2</button>
    <button type="button" onclick="onClick(3)">3</button>
  </div>

  <div>
    <button type="button" onclick="onClick('=')">=</button>
    <button type="button" onclick="onClick(0)">0</button>
    <button type="button" onclick="onClick('.')">.</button>
  </div>
</div>

Oh and i'm not asking any code i'm just asking for a little hint on how to do what i want. And yes i've been looking on the internet but i didn't find what i wanted.

Thanks !

html javascript
3 Answers

It just replaces the the current innerHTML value by the value you clicked. You should save the current value of document.getElementById('number').innerHTML in another variable and add your new num value to that variable. Then you can set the sum as the new innerHTML value.

user_89932530

You could concatenate the innerHTML with += so that it doesn't overwrite the existing innerHTML.

Working example:

function onClick(num) {
  document.getElementById('number').innerHTML += num;
}
#calculator {
  padding: 5px;
  background-color: #549699;
}
<div id="calculator">
  <p>Enter number(s) :
    <a id="number"></a>
  </p>
  <div>
    <button type="button" onclick="onClick(7)">7</button>
    <button type="button" onclick="onClick(8)">8</button>
    <button type="button" onclick="onClick(9)">9</button>
  </div>
  <div>
    <button type="button" onclick="onClick(4)">4</button>
    <button type="button" onclick="onClick(5)">5</button>
    <button type="button" onclick="onClick(6)">6</button>
  </div>
  <div>
    <button type="button" onclick="onClick(1)">1</button>
    <button type="button" onclick="onClick(2)">2</button>
    <button type="button" onclick="onClick(3)">3</button>
  </div>
  <div>
    <button type="button" onclick="onClick('=')">=</button>
    <button type="button" onclick="onClick(0)">0</button>
    <button type="button" onclick="onClick('.')">.</button>
  </div>
</div>

Basic calculator:

With window[operation]() you can call a function with operation as function name. For example window['multiply']() is the same like multiply().

const output = document.getElementById('number');
let operation = '';
let temp_result = 0;

function onClick(num) {
  output.innerHTML += num;
}

function divide(a, b) {
  return a / b;
}

function multiply(a, b) {
  return a * b;
}

function subtract(a, b) {
  return a - b;
}

function addNumber(a, b) {
  return a + b;
}

function chooseOperation(choice) {
  operation = choice;
  temp_result = parseFloat(output.innerHTML);
  output.innerHTML = '';
}

function startCalculation() {
  if (operation != '') {
    let operator = parseFloat(output.innerHTML)
    output.innerHTML = window[operation](temp_result, operator);
  }
  operation = '';
}
#calculator {
  padding: 5px;
  background-color: #549699;
}

button {
  width: 20px;
  height: 20px;
  margin: 2px 0;
}
<div id="calculator">
  <p>Enter number(s) :
    <a id="number"></a>
  </p>
  
  <div>
    <button type="button" onclick="onClick(7)">7</button>
    <button type="button" onclick="onClick(8)">8</button>
    <button type="button" onclick="onClick(9)">9</button>
    <button type="button" onclick="chooseOperation('divide')">/</button>
  </div>
  
  <div>
    <button type="button" onclick="onClick(4)">4</button>
    <button type="button" onclick="onClick(5)">5</button>
    <button type="button" onclick="onClick(6)">6</button>
    <button type="button" onclick="chooseOperation('multiply')">*</button>
  </div>
  
  <div>
    <button type="button" onclick="onClick(1)">1</button>
    <button type="button" onclick="onClick(2)">2</button>
    <button type="button" onclick="onClick(3)">3</button>
    <button type="button" onclick="chooseOperation('subtract')">-</button>
  </div>
  
  <div>
    <button type="button" onclick="startCalculation()">=</button>
    <button type="button" onclick="onClick(0)">0</button>
    <button type="button" onclick="onClick('.')">.</button>
    <button type="button" onclick="chooseOperation('addNumber')">+</button>
  </div>
</div>

Advanced calculator:

const output = document.getElementById('number');
let operation = '';
let temp_result = 0;

function addChar(num) {
  if (output.innerHTML == 0) {
    output.innerHTML = num;
  }
  else {
    output.innerHTML += num;
  }
}

function divide(a, b) {
  return a / b;
}

function multiply(a, b) {
  return a * b;
}

function subtract(a, b) {
  return a - b;
}

function addNumber(a, b) {
  return a + b;
}

function calculate() {
  if (operation != '') {
    let operator = parseFloat(output.innerHTML)
    output.innerHTML = window[operation](temp_result, operator);
  }
}

function chooseOperation(choice) {
  calculate();
  operation = choice;
  temp_result = parseFloat(output.innerHTML);
  output.innerHTML = 0;
}

function startCalculation() {
  calculate();
  operation = '';
}

function reset() {
  output.innerHTML = 0;
  operation = '';
}
#calculator {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 95px;
  padding: 3px;
  border: 1px solid #aaa;
  background-color: #549699;
}

#number {
  width: 96%;
  height: 20px;
  margin: 5px 0;
  border: 1px solid #aaa;
  text-align: end;
  overflow: hidden;
  background-color: #fff;
}

button {
  width: 20px;
  height: 20px;
  margin: 2px 0;
}

#reset {
  width: 96%;
}

#reset button {
  width: 100%;
}
<div id="calculator">
  <span id="number">0</span>
  
  <div>
    <button type="button" onclick="addChar('7')">7</button>
    <button type="button" onclick="addChar('8')">8</button>
    <button type="button" onclick="addChar('9')">9</button>
    <button type="button" onclick="chooseOperation('divide')">/</button>
  </div>
  
  <div>
    <button type="button" onclick="addChar('4')">4</button>
    <button type="button" onclick="addChar('5')">5</button>
    <button type="button" onclick="addChar('6')">6</button>
    <button type="button" onclick="chooseOperation('multiply')">*</button>
  </div>
  
  <div>
    <button type="button" onclick="addChar('1')">1</button>
    <button type="button" onclick="addChar('2')">2</button>
    <button type="button" onclick="addChar('3')">3</button>
    <button type="button" onclick="chooseOperation('subtract')">-</button>
  </div>
  
  <div>
    <button type="button" onclick="startCalculation()">=</button>
    <button type="button" onclick="addChar('0')">0</button>
    <button type="button" onclick="addChar('.')">.</button>
    <button type="button" onclick="chooseOperation('addNumber')">+</button>
  </div>
  
  <div id="reset">
    <button type="button" onclick="reset()">Reset</button>
  </div>
</div>

user_153773550 

<script>
//function for displaying values
function dis(val)
{
document.getElementById("edu").value+=val
 }
//function for evaluation
function solve()
{
let x = document.getElementById("edu").value
let y = eval(x)
document.getElementById("edu").value = y
}
//function for clearing the display
function clr()
{
document.getElementById("edu").value = ""
}
</script>

<div class="title">Made by Yasin</div>
<table border="1">
<tbody><tr>
<td><input type="button" value="c" onclick="clr()"> </td>
<td colspan="3"><input type="text" id="edu"></td>
<!-- clr() function will call clr to clear all value -->
</tr>
<tr>
<!-- creating buttons and assigning values-->
<td><input type="button" value="+" onclick="dis('+')"> </td>
<td><input type="button" value="1" onclick="dis('1')"> </td>
<td><input type="button" value="2" onclick="dis('2')"> </td>
<td><input type="button" value="3" onclick="dis('3')"> </td>
</tr>
<tr>
<td><input type="button" value="-" onclick="dis('-')"> </td>
<td><input type="button" value="4" onclick="dis('4')"> </td>
<td><input type="button" value="5" onclick="dis('5')"> </td>
<td><input type="button" value="6" onclick="dis('6')"> </td>
</tr>
<tr>
<td><input type="button" value="*" onclick="dis('*')"> </td>
<td><input type="button" value="7" onclick="dis('7')"> </td>
<td><input type="button" value="8" onclick="dis('8')"> </td>
<td><input type="button" value="9" onclick="dis('9')"> </td>
</tr>
<tr>
<td><input type="button" value="/" onclick="dis('/')"> </td>
<td><input type="button" value="." onclick="dis('.')"> </td>
<td><input type="button" value="0" onclick="dis('0')"> </td>
<!-- Evaluating function call eval()-->
<td><input type="button" value="=" onclick="solve()"> </td>
</tr>
</tbody></table>

<!-- for styling -->
<style>
.title{
border-radius: 20px;
margin-bottom: 20px;
text-align:center;
width: 210px;
color:#ff4456;
border: solid black 1px;
}
input[type="button"]
{
border-radius: 10px;
background-color:#ff4456;
color: black;
border-color:#ff4456 ;
width:100%;
}
input[type="text"]
{
border-radius: 10px;
text-align: right;
background-color:white;
border-color: black ;
width:100%
}
</style>

user_162414450
Related