We Keep Coding

Can't make the input on my calculator evaluate the sum

I have just started learning to code and am currently building my first calculator using javascript. It works coming down to the input being projected on the screen from clicking the button and the 'C' clear button clears the input screen, however I keep getting a syntax error when using the '=" button when trying to evaluate and need assistance, have tried multiple ways but am struggling when trying to use the screen.value.
// Selecting elements
const buttons = document.querySelectorAll(".btn");
let screen = document.getElementById("input");
//function to add input onto screen
const addTo = function(e) {
screen.value += e;
};
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
// log click to a variable
const input = buttons[i].value;
// add clicked input to screen
addTo(input);
// make screeninput evaluate sum
if (input === "=") {
let equals = eval(screen.value);
equals = screen.value;
} else if (input === "C") {
screen.value = " ";
}
});
}
<h1>MY CALCULATOR</h1>
<div id=c alc class="calc-container">
<div id=s creen class="input-container">
<input type=text name=d isplay id=i nput class="user-input" value="" />
</div>
<div id="wrapper" class="button-container">
<input value="9" type=b utton class="btn" />
<input value="8" type=b utton class="btn" />
<input value="7" type=b utton class="btn" />
<input value="6" type=b utton class="btn" />
<input value="5" type=b utton class="btn" />
<input value="4" type=b utton class="btn" />
<input value="3" type=b utton class="btn" />
<input value="2" type=b utton class="btn" />
<input value="1" type=b utton class="btn" />
<input value="*" type=b utton class="btn" />
<input value="0" type=b utton class="btn" />
<input value="+" type=b utton class="btn" />
<input value="/" type=b utton class="btn" />
<input value="-" type=b utton class="btn" />
<input value="=" type=b utton class="btn equals">
<input value="." type=b utton class="btn" />
<input value="C" type=b utton class="btn" />
</div>
</div>

In case of = you are trying to evaluate an expression with =, for example 10+2=. Which is an invalid expression. You should avoid that = from the eval statement and execute only 10+2.
Call addTo only if the input is not = and C to fix this.
// Selecting elements
const buttons = document.querySelectorAll(".btn");
let screen = document.getElementById("input");
//function to add input onto screen
const addTo = function (e) {
screen.value += e;
};
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function () {
// log click to a variable
const input = buttons[i].value;
// make screeninput evaluate sum
if (input === "=") {
let equals = eval(screen.value);
screen.value = equals;
} else if (input === "C") {
screen.value = " ";
} else {
// add clicked input to screen
addTo(input);
}
});
}
<h1>MY CALCULATOR</h1>
<div id=calc class="calc-container">
<div id=screen class="input-container">
<input type=text name=display id=input class="user-input" value="">
</input>
</div>
<div id="wrapper" class="button-container">
<input value="9" type=button class="btn"></input>
<input value="8" type=button class="btn"></input>
<input value="7" type=button class="btn"></input>
<input value="6" type=button class="btn"></input>
<input value="5" type=button class="btn"></input>
<input value="4" type=button class="btn"></input>
<input value="3" type=button class="btn"></input>
<input value="2" type=button class="btn"></input>
<input value="1" type=button class="btn"></input>
<input value="*" type=button class="btn"></input>
<input value="0" type=button class="btn"></input>
<input value="+" type=button class="btn"></input>
<input value="/" type=button class="btn"></input>
<input value="-" type=button class="btn"></input>
<input value="=" type=button class="btn equals"></input>
<input value="." type=button class="btn"></input>
<input value="C" type=button class="btn"></input>
</div>
</div>

Because of you do eval(screen.value).
When you call the eval function, your screen.value is 'xxxx='.
This is not in the syntax of eval.

How to change multiple text box value from a specific button of each with same same class name in java script?

I want to create an E-commerce cart where quantity increase or decrease with button, since cart have multiple items so multiple text box and button have same class name. For testing purpose I created 5 text boxes with buttons, one to increment and another one to decrease. When I click any button they only change
var dec = document.getElementsByClassName("dec_button");
var inc = document.getElementsByClassName("inc_button");
var x = document.getElementsByClassName("num");
for (var i = 0; i <= 3; i++) {
dec[i].addEventListener("click", Dec);
inc[i].addEventListener("click", Inc);
function Dec() {
x[i].value -= 1;
}
function Inc() {
x[i].value = +x[i].value + 1;
}
}
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>

Instead of accessing the elements by index in the loop, which can lead to closure issues, traverse the DOM in each click event to find the related input whose value should be changed. Try this:
var dec = document.getElementsByClassName("dec_button");
var inc = document.getElementsByClassName("inc_button");
var x = document.getElementsByClassName("num");
for (var i = 0; i <= 1; i++) {
dec[i].addEventListener("click", function() {
this.nextElementSibling.value = parseInt(this.nextElementSibling.value, 10) - 1;
});
inc[i].addEventListener("click", function() {
this.previousElementSibling.value = parseInt(this.previousElementSibling.value, 10) + 1;
});
}
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
Here's the same thing in jQuery:
$('.dec_button').on('click', function() {
$(this).next().val((i, v) => parseInt(v, 10) - 1)
});
$('.inc_button').on('click', function() {
$(this).prev().val((i, v) => parseInt(v, 10) + 1)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>

Keep focus on input box when click on button

I have a simple calculator with 2 inputs, and when I click on button I want to check if one of inputs is focused and if yes to enter that number.
But when I click on button I lose focus on inputs and get it on that button.
let activeElement = document.activeElement;
function numClick(number){
console.log("Num clicked=" + number);
let tempNumber="";
tempNumber = activeElement.value;
tempNumber = tempNumber + number;
activeElement.value=tempNumber;
}
<input id = "num1" type="text" name="num1" value="">
<span id="operacija"></span>
<input id = "num2" type="text" name="num2" value="">
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
<script type="text/javascript" src="zadatak1.js"></script>
I am not using any framework, just JS...

This is just a working sample of the suggestion given by Teemu. So credit there.
We add a focus event to our input controls and record the last focused control.
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#num1').addEventListener('focus', setLastElement);
document.querySelector('#num2').addEventListener('focus', setLastElement);
});
var lastInputElement;
const setLastElement = (event) => {
lastInputElement = event.target;
console.log(event.target);
};
let activeElement = document.activeElement;
function numClick(number){
if (lastInputElement === undefined) return;
console.log("Num clicked=" + number);
let tempNumber="";
tempNumber = lastInputElement.value;
tempNumber = tempNumber + number;
activeElement.value=tempNumber;
}
<input id = "num1" type="text" name="num1" value="">
<span id="operacija"></span>
<input id = "num2" type="text" name="num2" value="">
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
<script type="text/javascript" src="zadatak1.js"></script>

You can do something like this:
var activeInput = ""
function inputClick(input){
activeInput = input;
}
function numClick(number){
document.getElementById(activeInput).value += number;
}
<input id="num1" type="text" name="num1" value="" onclick=inputClick('num1')>
<span id="operacija"></span>
<input id="num2" type="text" name="num2" value="" onclick=inputClick('num2')>
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>

If you are ready to use Jquery, then you can try this code
let activeElement = document.activeElement;
var prevFocus;
$('input[type="text"]').focus(function() {
prevFocus = $(this);
});
function numClick(number){
console.log("Num clicked=" + number);
let tempNumber="";
tempNumber = activeElement.value;
tempNumber = tempNumber + number;
activeElement.value=tempNumber;
number= prevFocus.val() +''+ number
prevFocus.val(number)
prevFocus.focus()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id = "num1" type="text" name="num1" value="">
<span id="operacija"></span>
<input id = "num2" type="text" name="num2" value="">
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>

This is sample code update. I have kept a track of the last focused on input and changed the text accordingly. I am guessing this is what you asked for. You can write the methods to control the value of the input fields accordingly.
<!-- Added an extra method to remember the last focus, we pass the element as the function param: -->
<input id="num1" type="text" name="num1" value="" onclick='updateFocus(num1)'>
<span id="operacija"></span>
<input id="num2" type="text" name="num2" value="" onclick='updateFocus(num2)'>
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() " value="C">
<input type="button" onclick="operationClick('/')" value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')" value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')" value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
<script>
var activeElement;
// Updating the current focused on input field:
function updateFocus(input) {
activeElement = input;
console.log("The active element is: +" + activeElement);
}
// Ensuring the number sent on click event is added to the current input box.
function numClick(number) {
// If a button pressed before focusing on any of the inputs:
if (activeElement == null) return;
console.log("Num clicked: " + number);
var tempText = activeElement.value;
tempText += number;
activeElement.value = tempText;
}
</script>

One <DIV id="Div1"> ... Two fuctions ... javascript virtualkeyboard

I need help with my virtual keyboard, On my keyboard there is a DIV that i use to make button value="MAG" work in javascript but i'm using the same DIV to make the keyboard work and write but using one Div with the same id="Div1" doesn't work for me ... so i have to chose between ((Writing using the keyboard .... or changing the keyboard from MAG to MIN )) not both !! .... here is my code and and as you can see you can only write using the keyboard but you can not use MAG button .... i'm sorry for my bad English ...
<html>
<head>
<style type="text/css">
#Div1{
display: block;
}
#Div2 {
display: none;
}
.divs
{
width: 50px;
height: 50px;
border: 1px solid #000;
}
</style>
<style type="text/css">
*{margin:0;padding:0;}
*{margin:0;padding:0;}</style>
<script>
(function() {
'use strict';
var i,c;
function init(){
/* get all the input elements within the div whose id is "keyboard */
i=document.getElementById('Div1').getElementsByTagName('input');
/* loop through all the elements */
for(c=0;c<i.length;c++) {
/* find all the the input type="button" elements */
if(i[c].type==='button') {
/* add an onclick handler to each of them and set the function to call */
i[c].addEventListener('onclick',makeClickHandler(c));
}
}
/* this is the type="reset" input */
document.getElementById('clear').onclick=function() {
/* remove all the characters from the input type="text" element */
document.getElementById('text').value='';
}
}
function makeClickHandler(c) {
i[c].onclick=function() {
/* find the non-text button which has an id */
if(i[c].id==='back') {
/* remove last character from the input the type="text" element using regular expression */
document.getElementById('text').value=
document.getElementById('text').value.replace(/.$/,'');
}
/* find the text buttons */
else {
/* add characters to the input type="text" element */
document.getElementById('text').value+=this.value.toLowerCase();
}
};
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
})();
</script>
</head>
<body>
<div id="Div1">
<div>
<input value="1" type="button">
<input value="2" type="button">
<input value="3" type="button">
<input value="4" type="button">
<input value="5" type="button">
<input value="6" type="button">
<input value="7" type="button">
<input value="8" type="button">
<input value="9" type="button">
<input value="0" type="button">
<input value="Borrar" type="button">
</div><div>
<input value="q" type="button">
<input value="w" type="button">
<input value="e" type="button">
<input value="r" type="button">
<input value="t" type="button">
<input value="y" type="button">
<input value="u" type="button">
<input value="i" type="button">
<input value="o" type="button">
<input value="p" type="button">
<input value="`" type="button">
<input value="+" type="button">
</div><div><input value="a" type="button">
<input value="s" type="button">
<input value="d" type="button">
<input value="f" type="button">
<input value="g" type="button">
<input value="h" type="button">
<input value="j" type="button">
<input value="k" type="button">
<input value="l" type="button">
<input value="ñ" type="button">
<input value="´" type="button">
<input value="ç" type="button">
</div><div>
<input value="<" type="button">
<input value="z" type="button">
<input value="x" type="button">
<input value="c" type="button">
<input value="v" type="button">
<input value="b" type="button">
<input value="n" type="button">
<input value="m" type="button">
<input value="+" type="button">
<input value="." type="button">
<input value="-" type="button">
<input disabled="disabled" value=" " type="button">
</div><div>
<input id="Button1" value="MAG." type="button" onclick="switchVisible();">
<input value=" " type="button">
<input id="Button1" value="MAG." type="button" onclick="switchVisible();">
</div></div>
<div id="Div2" style="display:none" class="keyboard"><div>
<input value="!" type="button">
<input value=""" type="button">
<input value="·" type="button">
<input value="$" type="button">
<input value="%" type="button">
<input value="&" type="button">
<input value="/" type="button">
<input value="(" type="button">
<input value=")" type="button">
<input value="=" type="button">
<input value="Borrar" type="button">
</div><div>
<input value="Q" type="button">
<input value="W" type="button">
<input value="E" type="button">
<input value="R" type="button">
<input value="T" type="button">
<input value="Y" type="button">
<input value="U" type="button">
<input value="I" type="button">
<input value="O" type="button">
<input value="P" type="button">
<input value="^" type="button">
<input value="*" type="button">
</div><div>
<input value="A" type="button">
<input value="S" type="button">
<input value="D" type="button">
<input value="F" type="button">
<input value="G" type="button">
<input value="H" type="button">
<input value="J" type="button">
<input value="K" type="button">
<input value="L" type="button">
<input value="Ñ" type="button">
<input value="¨" type="button">
<input value="Ç" type="button">
</div><div>
<input value=">" type="button">
<input value="Z" type="button">
<input value="X" type="button">
<input value="C" type="button">
<input value="V" type="button">
<input value="B" type="button">
<input value="N" type="button">
<input value="M" type="button">
<input value=";" type="button">
<input value=":" type="button">
<input value="_" type="button">
<input disabled="disalbed" value="" type="button">
</div><div>
<input id="Button1" value="Min." type="button" onclick="switchVisible();">
<input value=" " type="button">
<input id="Button1" value="Min." type="button" onclick="switchVisible();">
</div></div></div></div>
<div>
<label>Track Search</label> - <input id="text" type="text" readonly="readonly">
</div>
<script type="text/javascript">
function switchVisible() {
var div1=document.getElementById('Div1');
var div2=document.getElementById('Div2');
if (div1 !== undefined && div2 !== undefined) {
div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block';
div2.style.display = div1.style.display === 'block' ? 'none' : 'block';
}
}
</script>
</body>
</html>

There are a few issues that need to be addressed:
Major issues:
Console JS error - there is no button with an ID of "clear".
I didn't see a button with an ID of "back"
I'm guessing it's the "Borrar" button, but it lacks an ID.
It would also need to be skipped by the loop in the init function discussed in the next point.
There are 4 <input id="Button1"...:
IDs need to be unique.
But these buttons do need a class or id to prevent the makeClickHandler from attaching an onclick function and overriding the inline onclick defintiion.
/* find all the the input type="button" elements */
if(i[c].type==='button' && (i[c].id !== "Button1" || i[c].id !== "back")) {
/* add an onclick handler to each of them and set the function to call */
i[c].addEventListener('onclick',makeClickHandler(c));
}
Minor issues:
Move the IIFE script in the <head> to the bottom of the page; then you won't need to add an event listener for "onload".
The code is almost unreadable. Please use indention properly and be consistent!
There's an input with a misspelled disable - disabled="disalbed"
By convention, element id's shouldn't start with a capital letter.
Avoid using onclick or any inline javascript. This is called a separation of concerns.
Brush up/learn about event delegation; it'll make the code cleaner.

Simple Calaculator in HTML and Javascript does not work

I have this HTML (is just a simple pocket calculator):
<html>
<head>
<script type="text/javascript" src="js/SimpleCalculator.js"></script>
</head>
<body>
<h2>Simple Calculator</h2>
<div class="calculator">
<div class="display"><input type="text" readonly size="20" id="dsp"></div>
<div class="keys">
<p><input type="button" value="7" onclick='getValue(this.value)'>
<input type="button" value="8" onclick='getValue(this.value)'>
<input type="button" value="9" onclick='getValue(this.value)'>
<input type="button" value="/" onclick='getValue(this.value)'>
</p>
<p><input type="button" value="4" onclick='getValue(this.value)'>
<input type="button" value="5" onclick='getValue(this.value)'>
<input type="button" value="6" onclick='getValue(this.value)'>
<input type="button" value="*" onclick='getValue(this.value)'>
</p>
<p><input type="button" value="1" onclick='getValue(this.value)'>
<input type="button" value="2" onclick='getValue(this.value)'>
<input type="button" value="3" onclick='getValue(this.value)'>
<input type="button" value="-" onclick='getValue(this.value)'>
</p>
<p><input type="button" value="0" onclick='getValue(this.value)'>
<input type="button" value="." onclick='getValue(this.value)'>
<input type="button" value="+" onclick='getValue(this.value)'></p>
<p><input type="button" value="C" onclick='getValue(this.value)'>
<input type="button" value="=" onclick='getValue(this.value)'></p>
</div>
</div>
</body>
</html>
and the JS file:
var s = '';
function getValue(val){
alert(val);
if (val != 'C' && val != '='){s += val;
document.getElementById("dsp").value+=val;}
if (val === 'C')
document.getElementById("dsp").value = " ";
if (val === '='){
alert(document.getElementByVal("dsp").value);
var res = eval(s);
document.getElementByVal("dsp").value = res;
}
}
The keys are displayed (numbers and math signs), alerts work fine but the evaluation of the expession is not displayed. Where am I wrong ?

You should use getElementById not ByVal, which is not a function.
var s = '';
function getValue(val){
if (val != 'C' && val != '='){s += val;
document.getElementById("dsp").value+=val;}
if (val === 'C')
document.getElementById("dsp").value = " ";
if (val === '='){
alert(document.getElementById("dsp").value);
var res = eval(s);
document.getElementById("dsp").value = res;
}
}
<h2>Simple Calculator</h2>
<div class="calculator">
<div class="display"><input type="text" readonly size="20" id="dsp"></div>
<div class="keys">
<p><input type="button" value="7" onclick='getValue(this.value)'>
<input type="button" value="8" onclick='getValue(this.value)'>
<input type="button" value="9" onclick='getValue(this.value)'>
<input type="button" value="/" onclick='getValue(this.value)'>
</p>
<p><input type="button" value="4" onclick='getValue(this.value)'>
<input type="button" value="5" onclick='getValue(this.value)'>
<input type="button" value="6" onclick='getValue(this.value)'>
<input type="button" value="*" onclick='getValue(this.value)'>
</p>
<p><input type="button" value="1" onclick='getValue(this.value)'>
<input type="button" value="2" onclick='getValue(this.value)'>
<input type="button" value="3" onclick='getValue(this.value)'>
<input type="button" value="-" onclick='getValue(this.value)'>
</p>
<p><input type="button" value="0" onclick='getValue(this.value)'>
<input type="button" value="." onclick='getValue(this.value)'>
<input type="button" value="+" onclick='getValue(this.value)'></p>
<p><input type="button" value="C" onclick='getValue(this.value)'>
<input type="button" value="=" onclick='getValue(this.value)'></p>
</div>
</div>

Change the last line to use getElementById, not getElementByVal