We Keep Coding

Issues building a calculator in JS

I'm a complete beginner at this and have started learning javascript through free code camp. I'm trying to write a program to make a calculator using basic javascript. My calculator seems to work fine except for it has a couple of issues that I want to fix. Edit to clarify what I'm asking for help here. Please run my codes in the snippet below with the following operation and you'll understand what I'm asking. Type 9-2 then hit '=' the calculator should display '7'. If you type a '2' immediately after the '7' is displayed, it will give you a '72' on the screen which is what I don't want it to do. I want it to reset to a blank screen. The other issue I have is a repeating display of operators. I've used the codes supplied by other commenters but they don't seem to work. I will keep searching for solution. Thank you all.
the operators: +, -, *, / and . are at this time can be repeated when pushing the button repeatedly. How do I create a function to only allow it to be displayed once.
After hitting the 'equal' button with the result displayed on the screen. If I pressed another number it would add on to the result instead of starting on a new screen. I need for it to reset and start a new using my current codes.
Any guidance and direction is appreciated. I have search Google for days now and still stuck. I'm also terrible at logic which I'm trying my best to wrap my head around this. Thanks.
var show = document.getElementById('display');
var reset = false;
function clear() {
if (reset) {
show.value = '';
reset = false;
}
}
function toScreen(x) {
clear();
show.value += x;
if (x === 'c') {
show.value = '';
}
}
function answer() {
x = show.value;
x = eval(x);
show.value = x;
reset = false;
}
function power() {
x = show.value;
x = eval(x * x);
show.value = x;
}
function backspace() {
var num = show.value;
var len = num.length - 1;
var newNum = num.substring(0, len);
show.value = newNum;
}
function percent() {
x = show.value;
x = eval(x / 100);
show.value = x;
}
function opposite() {
var n = show.value;
n = n * -1;
show.value = n;
}
function sqrt() {
var number = show.value;
var ans = Math.sqrt(number);
if (number < 0)
ans = "Try a positive number!";
show.value = ans;
}
function pie() {
var pi = show.value;
var result = Math.PI;
show.value = result;
}
<form>
<input type="text" id="display" disabled><br>
<input type="button" value="C" id="keys" onclick="toScreen('c')">
<input type="button" value="DEL" id="keys" onclick="backspace()">
<input type="button" value="π" id="keys" onclick="pie()">
<input type="button" value="+/-" id="keys" onclick="opposite()"><br>
<input type="button" value="√" id="keys" onclick="sqrt()">
<input type="button" value="%" id="keys" onclick="percent()">
<input type="button" value="x^2" id="keys" onclick="power()">
<input type="button" value="+" id="keys" onclick="toScreen('+')"><br>
<input type="button" value="9" id="keys" onclick="toScreen('9')">
<input type="button" value="8" id="keys" onclick="toScreen('8')">
<input type="button" value="7" id="keys" onclick="toScreen('7')">
<input type="button" value="-" id="keys" onclick="toScreen('-')"><br>
<input type="button" value="6" id="keys" onclick="toScreen('6')">
<input type="button" value="5" id="keys" onclick="toScreen('5')">
<input type="button" value="4" id="keys" onclick="toScreen('4')">
<input type="button" value="*" id="keys" onclick="toScreen('*')"><br>
<input type="button" value="3" id="keys" onclick="toScreen('3')">
<input type="button" value="2" id="keys" onclick="toScreen('2')">
<input type="button" value="1" id="keys" onclick="toScreen('1')">
<input type="button" value="/" id="keys" onclick="toScreen('/')"><br>
<input type="button" value="0" id="keys" onclick="toScreen('0')">
<input type="button" value="." id="keys" onclick="toScreen('.')">
<input type="button" value="=" id="equal" onclick="answer()"><br>
</form>

See the codes
Here is the perfectly working code. You can replace x with i some places like:
function power() {
x = eval(i * i);
show.value = x;
reset = true;
}
Problem fixed:
Your 1st & 2nd problem
Your code didn't check is input starting from a num. or operator (/1, *1)
Your code didn't check for invalid input (1+, 1+1+ etc)
Your code also not clear screen (like in case of anser) after power Pi etc
Your function like PI Power not check if input is a number (power of 8*) see the power function:
var show = document.getElementById('display');
var reset = false;
var i = ""; //store what is typed
function clear() {
if (reset) {
i = '';
show.value = i;
reset = false;
}
}
function toScreen(x) {
clear();
if (x === "+" || x === "-" || x === "*" || x === "/" || x === ".") {
if (i.charAt(i.length - 1) === x) {
return false;
}
if (i.length === 0) {
return false;
}
}
i += x;
if (x === 'c') {
i = '';
}
show.value = i;
}
function answer() {
var op = ["+", "-", "*", ".", "/"];
for (a=0; a<op.length; a++) {
if (i.charAt(i.length - 1) === op[a]) {
alert("Wrong input");
return false;
}
}
x = show.value;
x = eval(x);
show.value = x;
reset = true;
}
function power() {
if (isNaN(i)) {
alert("please enter a valid number");
return false;
}
x = show.value;
x = eval(x * x);
show.value = x;
reset = true;
}
function backspace() {
var num = show.value;
var len = num.length - 1;
var newNum = num.substring(0, len);
show.value = newNum;
reset = true;
}
function percent() {
x = show.value;
x = eval(x / 100);
show.value = x;
reset = true;
}
function opposite() {
var n = show.value;
n = n * -1;
show.value = n;
reset = true;
}
function sqrt() {
var number = show.value;
var ans = Math.sqrt(number);
if (number < 0)
ans = "Try a positive number!";
show.value = ans;
reset = true;
}
function pie() {
var pi = show.value;
var result = Math.PI;
show.value = result;
reset = true;
}
<form>
<input type="text" id="display" disabled><br>
<input type="button" value="C" id="keys" onclick="toScreen('c')">
<input type="button" value="DEL" id="keys" onclick="backspace()">
<input type="button" value="π" id="keys" onclick="pie()">
<input type="button" value="+/-" id="keys" onclick="opposite()"><br>
<input type="button" value="√" id="keys" onclick="sqrt()">
<input type="button" value="%" id="keys" onclick="percent()">
<input type="button" value="x^2" id="keys" onclick="power()">
<input type="button" value="+" id="keys" onclick="toScreen('+')"><br>
<input type="button" value="9" id="keys" onclick="toScreen('9')">
<input type="button" value="8" id="keys" onclick="toScreen('8')">
<input type="button" value="7" id="keys" onclick="toScreen('7')">
<input type="button" value="-" id="keys" onclick="toScreen('-')"><br>
<input type="button" value="6" id="keys" onclick="toScreen('6')">
<input type="button" value="5" id="keys" onclick="toScreen('5')">
<input type="button" value="4" id="keys" onclick="toScreen('4')">
<input type="button" value="*" id="keys" onclick="toScreen('*')"><br>
<input type="button" value="3" id="keys" onclick="toScreen('3')">
<input type="button" value="2" id="keys" onclick="toScreen('2')">
<input type="button" value="1" id="keys" onclick="toScreen('1')">
<input type="button" value="/" id="keys" onclick="toScreen('/')"><br>
<input type="button" value="0" id="keys" onclick="toScreen('0')">
<input type="button" value="." id="keys" onclick="toScreen('.')">
<input type="button" value="=" id="equal" onclick="answer()"><br>
</form>

function answer() {
x = show.value;
x = eval(x);
show.value = x;
reset = true;
}
Change the reset to true, so that it clears the show.value to be an empty string, that solves nr.2 for you

Edit your toScreen() function to only add your operator if it was
not previously typed:
function toScreen(x) {
clear();
var notTwice = ['+', '-', '*', '/', '.']; //List of chars that should not be repeated
if(notTwice.indexOf(x) > -1){
if(show.value.slice(-1) != x){ //Only type it if it wasn't typed right before
show.value += x;
}
}
else{
show.value += x;
}
if (x === 'c') {
show.value = '';
}
}
Just set reset to false in your answer() function.
Here is a working snippet for you :
var show = document.getElementById('display');
var reset = false;
var i = ""; //store what is typed
function clear() {
if (reset) {
i = '';
show.value = i;
reset = false;
}
}
function toScreen(x) {
clear();
var notTwice = ['+', '-', '*', '/', '.']; //List of chars that should not be repeated
if(notTwice.indexOf(x) > -1){
if(show.value.slice(-1) != x){ //Only type it if it wasn't typed right before
show.value += x;
}
}
else{
show.value += x;
}
if (x === 'c') {
show.value = '';
}
}
function answer() {
var op = ["+", "-", "*", ".", "/"];
for (a=0; a<op.length; a++) {
if (i.charAt(i.length - 1) === op[a]) {
alert("Wrong input");
return false;
}
}
x = show.value;
x = eval(x);
show.value = x;
reset = false;
}
function power() {
if (isNaN(i)) {
alert("please enter a valid number");
return false;
}
x = show.value;
x = eval(x * x);
show.value = x;
reset = true;
}
function backspace() {
var num = show.value;
var len = num.length - 1;
var newNum = num.substring(0, len);
show.value = newNum;
reset = true;
}
function percent() {
x = show.value;
x = eval(x / 100);
show.value = x;
reset = true;
}
function opposite() {
var n = show.value;
n = n * -1;
show.value = n;
reset = true;
}
function sqrt() {
var number = show.value;
var ans = Math.sqrt(number);
if (number < 0)
ans = "Try a positive number!";
show.value = ans;
reset = true;
}
function pie() {
var pi = show.value;
var result = Math.PI;
show.value = result;
reset = true;
}
<form>
<input type="text" id="display" disabled><br>
<input type="button" value="C" id="keys" onclick="toScreen('c')">
<input type="button" value="DEL" id="keys" onclick="backspace()">
<input type="button" value="π" id="keys" onclick="pie()">
<input type="button" value="+/-" id="keys" onclick="opposite()"><br>
<input type="button" value="√" id="keys" onclick="sqrt()">
<input type="button" value="%" id="keys" onclick="percent()">
<input type="button" value="x^2" id="keys" onclick="power()">
<input type="button" value="+" id="keys" onclick="toScreen('+')"><br>
<input type="button" value="9" id="keys" onclick="toScreen('9')">
<input type="button" value="8" id="keys" onclick="toScreen('8')">
<input type="button" value="7" id="keys" onclick="toScreen('7')">
<input type="button" value="-" id="keys" onclick="toScreen('-')"><br>
<input type="button" value="6" id="keys" onclick="toScreen('6')">
<input type="button" value="5" id="keys" onclick="toScreen('5')">
<input type="button" value="4" id="keys" onclick="toScreen('4')">
<input type="button" value="*" id="keys" onclick="toScreen('*')"><br>
<input type="button" value="3" id="keys" onclick="toScreen('3')">
<input type="button" value="2" id="keys" onclick="toScreen('2')">
<input type="button" value="1" id="keys" onclick="toScreen('1')">
<input type="button" value="/" id="keys" onclick="toScreen('/')"><br>
<input type="button" value="0" id="keys" onclick="toScreen('0')">
<input type="button" value="." id="keys" onclick="toScreen('.')">
<input type="button" value="=" id="equal" onclick="answer()"><br>
</form>

Adding Javascript value to hidden input

I'm trying to add a JavaScript variable to a hidden input field. How would I do this?
HTML:
<button type="button" class="submitFormOnClick btn btn-warning pull-right"
style="margin-bottom:15px; margin-top:15px;" id="bet">Bet
</button>
<input type="hidden" name="controller" value="keno">
<input type="hidden" name="task" id="task" value="">
<input type="hidden" name="pickednumbers" id="pickednumbers">
JavaScript:
<script type="text/javascript">
var inc = 0;
var pickednumbers = [];
function myFunction(elmnt, color, id)
{
if(pickednumbers.length >= 20)
{
return false;
}
if (pickednumbers.indexOf(id) === -1)
{
pickednumbers.push(id);
elmnt.style.background = color;
inc = inc + 1;
if(inc >= 20)
{
document.getElementById('onColor').setAttribute("style", "background-color:green");
}
}
else
{
return false;
}
}
</script>
What I need:
All I want is to have the variable pickednumbers be sent with the input type hidden.

You may simply do this :
var inc = 0;
var pickednumbers = [2,3,4,8];
document.getElementById("pickednumbers").setAttribute("value",JSON.stringify(pickednumbers));
<button type="button" class="submitFormOnClick btn btn-warning pull-right" style="margin-bottom:15px;margin-top:15px;" id="bet">Bet
</button>
<input type="hidden" name="controller" value="keno">
<input type="hidden" name="task" id="task" value="">
<input type="hidden" name="pickednumbers" id="pickednumbers">

input a button value on corresponding textbox that is on focus

I am trying to create a touchscreen calculator like where the button value will be placed on the textbox after i set it on a focus by clicking but it appears on all the textboxes.I tried to use the code
if ($(impo).is(":focus")) {
but it doesnt work. Please see my snippet
Thanks in advance!
var impo = document.getElementById("imp_text");
var tess = document.getElementById("tess_text");
var FKeyPad = document.Keypad;
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
document.getElementById('tess').onclick = function() {
document.getElementById('tess_text').focus();
}
document.getElementById('imp').onclick = function() {
document.getElementById('imp_text').focus();
}
function NumPressed(Num) {
if (impo) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
} else {
if (FKeyPad.ReadOut.value == " ")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
if (tess) {
if (FlagNewNum) {
FKeyPad.readtess.value = Num;
FlagNewNum = false;
} else {
if (FKeyPad.readtess.value == " ")
FKeyPad.readtess.value = Num;
else
FKeyPad.readtess.value += Num;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
</head>
<body>
<form name="Keypad" action="">
<input type="button" value="Imp" id="imp" /> Importo :
<input name="ReadOut" id="imp_text" type="Text" value=" "> <br>
<input type="button" value="Tes" id="tess" /> Card Tess :
<input name="readtess" id="tess_text" type="Text" value=" ">
<br>
<input type="button" value=" 1" onclick="NumPressed(1)" />
<input type="button" value=" 2" onclick="NumPressed(2)" />
<input type="button" value=" 3" onclick="NumPressed(3)" /> <br>
</form>
</body>
</html>

if (impo) and if (tess) just tests whether the element exists, which they do, so the value gets written to both of them because they both exist. In a desktop environment, you can't do what you're asking - you can give a textbox the focus, but once the user clicks on one of the buttons in order to select that number, the textbox no longer has the focus (because the button has it).
You need a separate way to maintain which textbox is currently selected, something like the snippet below. It will update the currently "selected" element both on the click of the Imp/Tes buttons and whenever either of the textbox gains focus (e.g. by mouse click or touch).
var impo = document.getElementById("imp_text");
var tess = document.getElementById("tess_text");
var current_input = impo;
impo.onfocus = function() {
current_input = impo;
}
tess.onfocus = function() {
current_input = tess;
}
document.getElementById('tess').onclick = function() {
current_input = tess;
tess.focus();
}
document.getElementById('imp').onclick = function() {
current_input = impo;
impo.focus();
}
function NumPressed(Num) {
current_input.value += Num;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
</head>
<body>
<form name="Keypad" action="">
<input type="button" value="Imp" id="imp" /> Importo :
<input name="ReadOut" id="imp_text" type="Text" value=""> <br>
<input type="button" value="Tes" id="tess" /> Card Tess :
<input name="readtess" id="tess_text" type="Text" value="">
<br>
<br>
<input type="button" value="1" onclick="NumPressed(this.value)" />
<input type="button" value="2" onclick="NumPressed(this.value)" />
<input type="button" value="3" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="4" onclick="NumPressed(this.value)" />
<input type="button" value="5" onclick="NumPressed(this.value)" />
<input type="button" value="6" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="7" onclick="NumPressed(this.value)" />
<input type="button" value="8" onclick="NumPressed(this.value)" />
<input type="button" value="9" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="0" onclick="NumPressed(this.value)" /> <br>
</form>
</body>
</html>

Java script hangman game issues

I've been working on a hangman game using an HTML template and javascript for a project for a class.
I am currently stuck with a few issues.
1. I am using an array to call the pictures for wrong guesses to add parts to the body in the gallows. only picture #4 shows up when 4 incorrect guesses have occurred.
2. I also have the issue that only for certain words do the buttons decide to actually work and the letter "o" never works
Any help would be greatly appreciated.
<!DOCTYPE HTML>
<html>
<head>
<title>Hangman</title>
<meta charset="utf-8">
<script type="text/javascript" language="JavaScript">
var NumberOfChances;
var theWord = "",oldString="";
var currentGuessed = "";
var value="";
var words = new Array();
words[0]="No strings attached";
words[1]="Never look back";
words[2]="Happy birthday";
words[3]="Against all odds";
words[4]="Break a leg";
words[5]="Off the beaten path";
words[6]="Good old days";
words[7]="Gold rush";
words[8]="Happy camper";
words[9]="Grin from ear to ear";
words[10]="Live long and prosper";
words[11]="Quartz watch";
words[12]="Jumping jacks";
words[13]="Income tax";
var image = new Array();
image[0] = '<img src="image0.jpg" align ="left" width="415" height="496">';
image[1] = "<img src='image1.jpg' align ='left' width='415' height='496'>";
image[2] = '<img src="image2.jpg" align ="left" width="415" height="496">';
image[3] = '<img src="image3.jpg" align ="left" width="415" height="496">';
image[4] = '<img src="image4.jpg" align ="left" width="415" height="496">';
image[5] = '<img src="image5.jpg" align ="left" width="415" height="496">';
image[6] = '<img src="image6.jpg" align ="left" width="415" height="496">';
NumberOfChances = image.length;
function swap(image)
{
document.getElementById("images").src =image+".gif";
}
var usedLetters = new Array();
function secretWord()
{
debugger
theWord = words[Math.floor(Math.random()*51)];
for (i=0; i<theWord.length; i++)
{
currentGuessed = currentGuessed + "*";
}
document.getElementById("secretWord").value = currentGuessed;
debugger
}
function gameProcess()
{
currentGuessed ="";
secretWord();
NumberOfChances=0;
document.getElementById("lives").value = NumberOfChances;
startImage = image[0];
}
function turn(letterGuessed)
{
debugger
value = oldString = "";
var correctGuess = false;
for (i=0; i<theWord.length; i++)
{
if (theWord.charAt(i) == letterGuessed)
{
value = value + letterGuessed;
currentGuessed = currentGuessed.replace(oldString + "*",value);
oldString = value;
correctGuess=true;
}
else
{
if(currentGuessed.charAt(i) == "*")
{
value = value + '*';
oldString = oldString + "*";
}
else
{
value = value + currentGuessed.charAt(i);
oldString = oldString + currentGuessed.charAt(i);
}
}
}
if (!correctGuess)
{
NumberOfChances++;
swap("image" + NumberOfChances );
if (NumberOfChances==6)
{
alert("You Lost!");
document.getElementById("secretWord").value = theWord;
theWord = "";
currentGuessed = "";
}
document.getElementById("lives").value = NumberOfChances;
if(correctGuess != 0)
{
takeChance();
}
}
win();
}
function win()
{
var winCount = 0;
for(var i = 0;i<theWord.length;i++)
{
if(currentGuessed.charAt(i) == "*")
{
winCount++;
}
document.getElementById("secretWord").value = currentGuessed;
}
if(winCount == 0 && currentGuessed != "")
{
alert("yay, you win!");
}
}
</script>
</head>
<body>
<H1>Lets play Hangman</H1>
<form name="userGuessForm" id="form1">
<div id="Image"><img src="image0.gif" align ="left" width="415" height="496" id="images"/></div>
<div id="wordDisplay"></div>
This is the Secret Word<br /><input id="secretWord" type="text" value="currentGuessed" />
<br />
<input id="letters" type="button" name="a" value="a" onClick="turn('a');">
<input id="Button1" type="button" name="b" value="b" onClick="turn('b');">
<input id="Button2" type="button" name="c" value="c" onClick="turn('c');">
<input id="Button3" type="button" name="d" value="d" onClick="turn('d');">
<input id="Button4" type="button" name="e" value="e" onClick="turn('e');">
<input id="Button5" type="button" name="f" value="f" onClick="turn('f');">
<input id="Button6" type="button" name="g" value="g" onClick="turn('g');">
<input id="Button7" type="button" name="h" value="h" onClick="turn('h');">
<input id="Button8" type="button" name="i" value="i" onClick="turn('i');">
<input id="Button9" type="button" name="j" value="j" onClick="turn('j');">
<input id="Button10" type="button" name="k" value="k" onClick="turn('k');">
<input id="Button11" type="button" name="l" value="l" onClick="turn('l');">
<input id="Button12" type="button" name="m" value="m" onClick="turn('m');">
<input id="Button13" type="button" name="n" value="n" onClick="turn('n');">
<input id="Button14" type="button" name="o" value="o" onClick="turn('o');">
<input id="Button15" type="button" name="p" value="p" onClick="turn('p');">
<input id="Button16" type="button" name="q" value="q" onClick="turn('q');">
<input id="Button17" type="button" name="r" value="r" onClick="turn('r');">
<input id="Button18" type="button" name="s" value="s" onClick="turn('s');">
<input id="Button19" type="button" name="t" value="t" onClick="turn('t');">
<input id="Button20" type="button" name="u" value="u" onClick="turn('u');">
<input id="Button21" type="button" name="v" value="v" onClick="turn('v');">
<input id="Button22" type="button" name="w" value="w" onClick="turn('w');">
<input id="Button23" type="button" name="x" value="x" onClick="turn('x');">
<input id="Button24" type="button" name="y" value="y" onClick="turn('y');">
<input id="Button25" type="button" name="z" value="z" onClick="turn('Z');"><br />
Number of Tries (6): <input id="lives" type="text" value="0" onfocus="lives.blur();" SIZE=2>
<input type="button" name="submit" value=" Start Over " onClick="gameProcess()">
<input type="button" name="end" value=" END " onClick="gameEnd()"><br />
</form>
</body>
</html>

Your images aren't working correctly because you're using an array as a string.
document.getElementById("images").src =image+".gif";
should be
document.getElementById("images").src ="image"+NumberOfChances+".gif";
otherwise, what you're doing is taking the html of all the images and setting it as the src attribute for your image.
<img src="<img src="image0.jpg" align ="left" width="415" height="496">, <img src="image1.jpg" align ="left" width="415" height="496">, <img src="image2.jpg" align ="left" width="415" height="496">..." id="images"> This isn't what you want!
And also, I think you've got your jpgs and gifs mixed up. Check your file extensions.
Also, do you have 50 words that you aren't showing here? Your array contains 13, but later you write
theWord = words[Math.floor(Math.random()*51)];
And that seems to suggest you have one less than 51, or 50, words.
In your letterGuessed function, I don't think you're quite grasping the concept of for loops. What you seem to be thinking is that a new iteration happens each time you call the function, but that isn't the case. Rather, the for loop goes through the entire word each time you call the function with the one letter you guessed. So unless every single letter in the word is o, if you guess the letter o, you'll get one point for every o in the word, and -1 chance for every character that isn't o, which isn't what you want. Ditch the for loop and just use i++ for each time the function runs.

function swap(image)
{
document.getElementById("images").src =image+".gif";
}
Try changing gif to jpg

if (!correctGuess)
{
NumberOfChances++;
swap(image[NumberOfChances]);

Getting the value of a textbox then parsing it

I am creating a simple calculator in javascript but how come each time I added numbers it only adds the the first half of the 2nd number? for example
first input: 55
second input: 55
then it will give me an answer of 60.
it only adds the lower half of the 2nd input.
here's my code
var fnum;
var secondNum;
var operation;
function msg(val){
document.getElementById("fnumtext").value += val;
fnum = val;
}
function showOperation(oper){
document.getElementById("fnumtext").value ="";
document.getElementById("operation").value = oper;
operation = oper;
}
function equal(){
secondNum = document.getElementById("fnumtext").value;
alert(secondNum+operation);
if(document.getElementById("operation").value == "+"){
var x = parseInt(fnum)+parseInt(secondNum);
alert(x);
}else if(document.getElementById("operation").value == "-"){
var x = parseInt(fnum)-parseInt(secondNum);
alert(x);
}else if(document.getElementById("operation").value == "*"){
var x = parseInt(fnum)*parseInt(secondNum);
alert(x);
}else if(document.getElementById("operation").value == "/"){
var x = parseInt(fnum)/parseInt(secondNum);
alert(x);
}else{
alert("choose some Operation");
}
}
my HTML
body>
<input id = "fnumtext"type="text" name="firstnum" /><br />
<input id = "operation" type="text" name="secondnum" /><br />
<input type="button" value="1" onclick="msg('1')" />
<input type="button" value="2" onclick="msg('2')" />
<input type="button" value="3" onclick="msg('3')" /></br>
<input type="button" value="4" onclick="msg('4')" />
<input type="button" value="5" onclick="msg('5')" />
<input type="button" value="6" onclick="msg('6')" /><br/>
<input type="button" value="7" onclick="msg('7')" />
<input type="button" value="8" onclick="msg('8')" />
<input type="button" value="9" onclick="msg('9')" /></br>
<input type="button" value="0" onclick="msg('0')" /></br>
<input type="button" value="+" onclick="showOperation('+')" />
<input type="button" value="*" onclick="showOperation('*')" />
<input type="button" value="/" onclick="showOperation('/')" />
<input type="button" value="-" onclick="showOperation('-')" />
<input type="button" value="DO ZEH OPERATION!" onclick="equal()" />
</body>

In msg, you set the value of fnum rather than appending it. Try changing that to +=.
function msg(val){
document.getElementById("fnumtext").value += val;
fnum += val; // changed this line
}

First you need to keep track whether this is a first operand you're entering now or the second one.
Second, you must add current digit's value to the already accumulated values, not override them.
var fnum;
var secondNum;
var operation;
var firstOperand = true;
function msg(val) {
document.getElementById("fnumtext").value += val;
if (firstOperand) {
fnum = document.getElementById("fnumtext").value;
}
}
function showOperation(oper)
{
firstOperand = false;
document.getElementById("fnumtext").value = "";
document.getElementById("operation").value = oper;
operation = oper;
}
function equal() {
secondNum = document.getElementById("fnumtext").value;
alert(secondNum+operation);
if (document.getElementById("operation").value == "+") {
var x = parseInt(fnum) + parseInt(secondNum);
alert(x);
} else if (document.getElementById("operation").value == "-") {
var x = parseInt(fnum) - parseInt(secondNum);
alert(x);
} else if (document.getElementById("operation").value == "*") {
var x = parseInt(fnum) * parseInt(secondNum);
alert(x);
} else if (document.getElementById("operation").value == "/") {
var x = parseInt(fnum) / parseInt(secondNum);
alert(x);
} else {
alert("choose some Operation");
}
firstOperand = true;
document.getElementById("fnumtext").value = "";
}