when i clicked the button '=', there's nothing happen
Question
i am trying to make a simple calculator with javascript, but when i clicked the button '=' the result didn't appear.
<!DOCTYPE html>
<html>
<body>
<h1> Kalkulator Sederhana</h1>
<input type="text" name="angkapertama" placeholder="Angka Pertama" id="angkapertama">
<input type="text" name="angkakedua" placeholder="Angka Kedua" id="angkakedua">
<button id="hasil" onclick="tambah">=</button>
<h2 id="hsl"></h2>
<script>
var a = document.getElementById('angkapertama').value;
var b = document.getElementById('angkakedua').value;
var c = document.getElementById('hasil');
c.addEventListener('click', tambah, false);
function tambah() {
return a + b;
document.getElementById("hsl").innerHTML = tambah;
}
</script>
</body>
</html>
4 answers
solution1
2 2017-09-20 14:35:32
A number of problems with this
1) Collecting the input values from the textboxes before the user has had chance to type anything into them. You need to do that inside the event handler.
2) An inline event attribute (which was wrongly defined without the () anyway) and an eventlistener added in code. Only one is needed. The eventListener is generally considered the better way, eg for code maintainability and visibility.
3) Treating the values as strings and not numbers (eg if the code had otherwise been working, "4" + "4" would have returned "44"!)
4) returning from your tambah() function before the line which actually displayed the result. return returns from a function, it's not just for getting the result of a calculation.
This version corrects all those errors. You can run it to test it out:
var c = document.getElementById('hasil'); c.addEventListener('click', tambah, false); function tambah() { var a = document.getElementById('angkapertama').value; var b = document.getElementById('angkakedua').value; var sum = parseFloat(a) + parseFloat(b); document.getElementById("hsl").innerHTML = sum; }
<h1> Kalkulator Sederhana</h1> <input type="text" name="angkapertama" placeholder="Angka Pertama" id="angkapertama"> <input type="text" name="angkakedua" placeholder="Angka Kedua" id="angkakedua"> <button id="hasil">=</button> <h2 id="hsl"></h2>
solution2
1 2017-09-20 14:27:21
A Simple example
var c = document.getElementById('hasil'); c.addEventListener('click', tambah, false); function tambah() { var a = document.getElementById('angkapertama').value; var b = document.getElementById('angkakedua').value; var sum = Number(a) + Number(b); //or // var sum = parseFloat(a) + parseFloat(b); document.getElementById("hsl").innerHTML = sum; console.log(sum) }
<h1> Kalkulator Sederhana</h1> <input type="text" name="angkapertama" placeholder="Angka Pertama" id="angkapertama"> <input type="text" name="angkakedua" placeholder="Angka Kedua" id="angkakedua"> <button id="hasil">=</button> <h2 id="hsl"></h2>
However, the addEventListener() function, despite it's the standard, just doesn't work in old browsers (Internet Explorer below version 9), and this is another big difference. If you need to support these ancient browsers, you should follow the
onclickway.
HTML:
<button id="hasil" onclick="tambah()">=</button>
SCRIPT:
function tambah() {
var a = document.getElementById('angkapertama').value;
var b = document.getElementById('angkakedua').value;
var sum = Number(a) + Number(b); //or
// var sum = parseFloat(a) + parseFloat(b);
document.getElementById("hsl").innerHTML = sum;
console.log(sum)
}
content source here
solution3
1 2017-09-20 14:31:03
There are a few things incorrect with your code.
When you return a + b, there's no code executed after that return statement.
I've changed the code slightly, the vars a and b are now defined inside the function, and also made sure to use parseInt on your a and b - otherwise they would end up being concatenated as strings (meaning 1 + 2 would be 12 - wrong!)
var c = document.getElementById('hasil'); c.addEventListener('click', tambah); function tambah() { var a = parseInt(document.getElementById('angkapertama').value); var b = parseInt(document.getElementById('angkakedua').value); var result = a + b; document.getElementById("hsl").innerHTML = result; }
<!DOCTYPE html> <html> <body> <h1> Kalkulator Sederhana</h1> <input type="text" name="angkapertama" placeholder="Angka Pertama" id="angkapertama"> <input type="text" name="angkakedua" placeholder="Angka Kedua" id="angkakedua"> <button id="hasil">=</button> <h2 id="hsl">answer here</h2> </body> </html>
solution4
-1 2017-09-20 14:25:49
Try this :
<!DOCTYPE html>
<html>
<body>
<h1> Kalkulator Sederhana</h1>
<input type="text" name="angkapertama" placeholder="Angka Pertama" id="angkapertama">
<input type="text" name="angkakedua" placeholder="Angka Kedua" id="angkakedua">
<button id="hasil" onclick="tambah()">=</button>
<h2 id="hsl"></h2>
<script>
var a = document.getElementById('angkapertama').value;
var b = document.getElementById('angkakedua').value;
var c = document.getElementById('hasil');
c.addEventListener('click', tambah, false);
function tambah() {
var sum = a + b;
document.getElementById("hsl").innerHTML = sum;
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.