This article shows “how to make a simple automated calculation system” with JavaScript.
Basically this is for me to learn, but I hope this is for beginners of JavaScript.
Development Environment
Browser: Google Chrome
System: WordPress
Japanese version
【JS&CSS】自動計算式の作り方
JavaScriptとCSSを使って、簡単な計算式の作り方を公開します。自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！ フォームに入…
目次
Example
There are a lot of ways to write the code, but I introduce just the 3 ways as below.
I believe these are easier ways to understand from my experience.
The Simplest Code
If you input some numbers in the left side boxes, you can get the total of the numbers automatically.
* This appearance and the system is the same as the following other examples.
Code
HTML
<div class="custom-space">
<input type="number" id="A1">
<p>+</p>
<input type="number" id="B1">
<p>=</p>
<p class="answer" id="X1"></p>
</div>
- Just only number can be input in case of the type of input element = “number”.
CSS
p {
margin: 0;
line-height: 50px;
}
.custom-space {
width: 800px;
margin: 8px auto;
display: flex;
justify-content: space-between;
}
input {
width: 25%;
height: 50px;
text-align: center;
font-size: 18px;
}
.answer {
width: 25%;
height: 50px;
border: 1px solid #ccc;
background-color: rgba(238, 238, 238, .5);
text-align: center;
}
JavaScript
const A1 = document.getElementById('A1');
const B1 = document.getElementById('B1');
const X1 = document.getElementById('X1');
A1.addEventListener('input', () => {
X1.textContent = Number(A1.value) + Number(B1.value);
})
B1.addEventListener('input', () => {
X1.textContent = Number(A1.value) + Number(B1.value);
})
Using “function()” to integrate the calculation parts
If you input some numbers in the left side boxes, you can get the total of the numbers automatically.
* This appearance and the system is the same as the other examples.
Code
The HTML and the CSS are the same as the other examples.
HTML
<div class="custom-space">
<input type="number" id="A2">
<p>+</p>
<input type="number" id="B2">
<p>=</p>
<p class="answer" id="X2"></p>
</div>
- Just only number can be input in case of the type of input element = “number”.
CSS
p {
margin: 0;
line-height: 50px;
}
.custom-space {
width: 800px;
margin: 8px auto;
display: flex;
justify-content: space-between;
}
input {
width: 25%;
height: 50px;
text-align: center;
font-size: 18px;
}
.answer {
width: 25%;
height: 50px;
border: 1px solid #ccc;
background-color: rgba(238, 238, 238, .5);
text-align: center;
}
JavaScript
const A2 = document.getElementById('A2');
const B2 = document.getElementById('B2');
const X2 = document.getElementById('X2');
function add() {
X2.textContent = Number(A2.value) + Number(B2.value);
}
A2.addEventListener('input', () => {
add();
})
B2.addEventListener('input', () => {
add();
})
Using “forEach” to integrate the same code
If you input some numbers in the left side boxes, you can get the total of the numbers automatically.
* This appearance and the system is the same as the other examples.
Code
The HTML and the CSS are the same as the other examples.
HTML
<div class="custom-space">
<input type="number" id="A3">
<p>+</p>
<input type="number" id="B3">
<p>=</p>
<p class="answer" id="X3"></p>
</div>
- Just only number can be input in case of the type of input element = “number”.
CSS
p {
margin: 0;
line-height: 50px;
}
.custom-space {
width: 800px;
margin: 8px auto;
display: flex;
justify-content: space-between;
}
input {
width: 25%;
height: 50px;
text-align: center;
font-size: 18px;
}
.answer {
width: 25%;
height: 50px;
border: 1px solid #ccc;
background-color: rgba(238, 238, 238, .5);
text-align: center;
}
JavaScript
const A3 = document.getElementById('A3');
const B3 = document.getElementById('B3');
const X3 = document.getElementById('X3');
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
input.addEventListener('input', () => {
X3.textContent = Number(A3.value) + Number(B3.value);
})
});
