I made a calculator using javascript , it works fine but it has some problems.
When I want to calculate the radical of number , when I click the radical button , it does not work but when I double click it , it works !
I do not know how to add decimal to my calculator , please help me
This is the javascript code:
<script type="text/javascript">
var valid=false ,operand='', numCounter=1, firstNum=null, secondNum=null;
function remov(){
document.getElementById('result').value = null;
secondNum = firstNum = null;
numCounter=1;
}
function show(id){
var val = document.getElementById(id).value;
if(id=='+' || id=='-' || id=='*' || id=='/' || id=='^' || id=='√')
{
valid=true;
if(numCounter > 1){
calc();
}
firstNum=Number(document.getElementById('result').value);
numCounter++;
operand=id;
}
else if(id == 'equal')
{
calc();
numCounter=1;
}
else
{
if(valid){
document.getElementById('result').value = null;
valid=false;
}
document.getElementById('result').value += val;
}
}
function calc(){
if(numCounter > 1){
secondNum=Number(document.getElementById('result').value);
}else{
firstNum=Number(document.getElementById('result').value);
}
switch(operand)
{
case '+':
document.getElementById('result').value = firstNum+secondNum;
break;
case '-':
document.getElementById('result').value = firstNum-secondNum;
break;
case '/':
if(firstNum != 0)
document.getElementById('result').value = firstNum/secondNum;
else
document.getElementById('result').value = "Error";
break;
case '*':
document.getElementById('result').value = firstNum*secondNum;
break;
case '^':
document.getElementById('result').value = Math.pow(firstNum,secondNum);
break;
case '√':
document.getElementById('result').value = Math.sqrt(firstNum);
break;
}
}
</script>
this is the HTML
<body oncontextmenu="return false">
<div id="cal">
<input id="result" type="text" readonly /><br/>
<button value="1" id="1" onclick="show(1)">1</button>
<button value="2" id="2" onclick="show(2)">2</button>
<button value="3" id="3" onclick="show(3)">3</button>
<button value="+" id="+" onclick="show('+')">+</button><br/>
<button value="4" id="4" onclick="show(4)">4</button>
<button value="5" id="5" onclick="show(5)">5</button>
<button value="6" id="6" onclick="show(6)">6</button>
<button value="-" id="-" onclick="show('-')">-</button><br/>
<button value="7" id="7" onclick="show(7)">7</button>
<button value="8" id="8" onclick="show(8)">8</button>
<button value="9" id="9" onclick="show(9)">9</button>
<button value="*" id="*" onclick="show('*')">*</button><br/>
<button value="." id="." onclick="show('.')">.</button>
<button value="0" id="0" onclick="show(0)">0</button>
<button value="√" id="√" onclick="show('√')">√</button>
<button value="/" id="/" onclick="show('/')">/</button><br/>
<button onclick="remov()">C</button>
<button value="^" id="^" onclick="show('^')">^</button>
<button id="equal" value="=" onclick="show('equal')">=</button>
</div>
</body>
For decimals you can use toFixed - http://www.w3schools.com/jsref/jsref_tofixed.asp
As per for the other problem, don't know. Is it working for the other buttons when you only click once?
Related
I am trying to read the value from an input text, and make all the math operations at once
I have gotten to calculate one operation such as 25+67 but I cannot make to read and split more complex operations such as 50+5*5, I do not know how to get the different values and make operations one by one, I have tried creating a loop using split everytime it finds something different than a number but it is not working
Where screen is the id of the input where you can write down all the numbers and operations you like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="js/data.js"></script>
<title>Calculator</title>
</head>
<body>
<div class="mycalc">
<form name="calculator" id="calculator" class="cuerpo">
<h2 class="casio">CASIO</h2>
<input type="text" name="screen" id="screen" readonly>
<div>
<input type="button" id="one" value="1" onclick="takeValue(1)">
<input type="button" id="two" value="2" onclick="takeValue(2)">
<input type="button" id="three" value="3" onclick="takeValue(3)">
<input type="button" id="add" value="+" onclick="takeValue('+')">
</div>
<div>
<input type="button" id="four" value="4" onclick="takeValue(4)">
<input type="button" id="five" value="5" onclick="takeValue(5)">
<input type="button" id="six" value="6" onclick="takeValue(6)">
<input type="button" id="sus" value="-" onclick="takeValue('-')">
</div>
<div>
<input type="button" id="seven" value="7" onclick="takeValue(7)">
<input type="button" id="eight" value="8" onclick="takeValue(8)">
<input type="button" id="nine" value="9" onclick="takeValue(9)">
<input type="button" id="mul" value="*" onclick="takeValue('*')">
</div>
<div>
<input type="button" id="zero" value="0" onclick="takeValue(0)">
<button type="button" id="clear" value="" onclick="clearInput()">AC</button>
<input type="button" id="zero" value="="onclick="prueba()">
<input type="button" id="div" value="/" onclick="takeValue('/')">
</div>
</form>
</div>
</body>
</html>
function checkOperation(num1,num2, oper){
let res;
switch(oper){
case "+":
res = parseInt(num1) + parseInt(num2);
break;
case "-":
res = parseInt(num) + parseInt(num2);
break;
case "*":
res = parseInt(num1) + parseInt(num2);
break;
case "/":
res = parseInt(num1) + parseInt(num2);
break;
}
return res;
}
function prueba(){
let actual = document.getElementById('screen').value;
let arr = [];
let res = 0;
let res1 = 0;
let temp;
for(let i = 0; i < actual.length; i++){
if(isNaN(actual[i])){
let oper1 = actual[i];
arr = actual.split(oper1);
temp = arr[1];
for(let j = 0; j < temp.length; j++){
if(isNaN(temp[j])){
let oper2 = temp[j];
let num1 = temp[0];
let num2 = temp[1];
res = checkOperation(num1, num2, oper2)
}
}
res1 = checkOperation(parseInt(temp), res, oper1)
}
}
document.getElementById('screen').value = res1;
}
You can try using JavaScript's eval() function.
const a = eval('25+67');
const b = eval('50+5*5');
console.log(a);
console.log(b);
However, do note that there are various security risks involved when using that function, hence you should be careful when it comes to using it on production code.
Hi when I put the following JavaScript code into the JS file in my CodePen for my Calculator Web App, it is not validating! First, it says, "Unexpected token ;", and then when I remove all the semi-colons, it then asks to remove, **flag**. Is there something wrong with the CodePen validator? Or is it the JavaScript code? Why wouldn't the semicolons be valid? Aren't those an integral part of JavaScript syntax?
Here is the link to my CodePen:https://codepen.io/IDCoder/pen/zEBoOQ
Here is my HTML code:
<DOCTYPE html>
<html>
<head>
<title>Ziontific Calculator</title>
<meta name="viewport" content="initial-scale=1">
</head>
<body>
<div class="container">
<h1 id="heading">ZIONTIFIC CALCULATOR</h1>
<div class="form holder">
<form id="formone" name="calc">
<input id="display" type="text" name="display" value=".....Get on board...." disabled contenteditable="false" >
<br>
<input class="button number one" type="button" value="1" onClick=”calc.display.value+=1”>
<input class="button number one" type="button" value="2" onClick="calc.display.value+=2">
<input class="button number one" type="button" value="3" onClick="calc.display.value+=3">
<input class="button three" type="button" value="C" onClick="Resetfunction(this.form)">
<input class="button three" type="button" value="<-" onClick="backspace(this.form)">
<input class="button three" type="button" value="=" onClick="evaluation(this.form)">
<input class="button number one" type="button" value="4" onClick="calc.display.value+=4">
<input class="button number one" type="button" value="5" onClick="calc.display.value+=5">
<input class="button number one" type="button" value="6" onClick="calc.display.value+=6">
<input class="button opps one" type="button" value="-" onClick="calc.display.value+='-'">
<input class="button opps one" type="button" value="%" onClick="calc.display.value+='%'">
<input class="button end one" type="button" value="cos" onClick="cos_function()">
<input class="button number two" type="button" value="7" onClick=”calc.display.value+=7”>
<input class="button number two" type="button" value="8" onClick=”calc.display.value+=8”>
<input class="button number two" type="button" value="9" onClick=”calc.display.value+=9”>
<input class="button opps two" type="button" value="*" onClick="calc.display.value+='*'">
<input class="button n" type="button" value="n!" onClick="fact_function()">
<input class="button sin"type="button" value="sin" onClick="sin_function()">
<input class="button opps two" type="button" value="." onClick="calc.display.value+='.'">
<input class="button number two" type="button" value="0" onClick="calc.display.value+=0">
<input class="button opps two" type="button" value="," onClick="calc.display.value+=','">
<input class="button opps two" type="button" value="+" onClick="calc.display.value+='+'">
<input class="button opps two" type="button" value="/" onClick="calc.display.value+='/'">
<input class="button end two" type="button" value="tan" onClick=”tan_function()”>
<input class="button third row" type="button" value="E" onClick="calc.display.value+=2.718">
<input class="button third row" type="button" value="pi" onClick="calc.display.value+=3.141">
<input class="button third row" type="button" value="x^y" onClick="power_function()">
<input class="button third row" type="button" value="(" onClick="openpara(this.value)">
<input class="button third row" type="button" value=")" onClick="closepara(this.value)">
<input class="button third row" type="button" value="log" onClick="log_function()">
<input class="button third row" type="button" value="sqrt" onClick="sqrt_function()">
<input class="button third row" type="button" value="LN2" onClick="calc.display.value+=0.693">
<input class="button third row" type="button" value="LN10" onClick="calc.display.value+=2.302">
<input class="button third row" type="button" value="log2E" onClick="calc.display.value+=1.442">
<input class="button third row" type="button" value="log10E" onClick="calc.display.value+=0.434">
<input class="button third row" type="button" value="EXP" onClick="exp_function">
</form>
</div>
</div>
</body>
</html>
And here is my JavaScript code:
<script>
flag = 0;
function openpara(val)
{
calc.display.value+=val;
flag+=1;
}
function closepara(valval)
{
calc.display.value+=valval;
flag-=1;
}
function backspace(calc)
{
var size = calc.display.value.length;
calc.display.value=calc.display.value.substring(0,size-1);
}
function Resetfunction(calc)
{
calc.display.value=” “;
flag=0;
}
function cos_function()
{
flag+=1;
calc.display.value+=’Math.cos(‘;
}
function sin_function()
{
flag+=1;
calc.display.value+=’Math.sin(‘;
}
function tan_function()
{
flag+=1;
calc.display.value+=’Math.tan(‘;
}
function log_function()
{
flag+=1;
calc.display.value+=’Math.log(‘;
}
function sqrt_function()
{
flag+=1;
calc.display.value+=’Math.sqrt(‘;
}
function exp_function()
{
flag+=1;
calc.display.value+=’Math.exp(‘;
}
function fact(x)
{
factvar=1;
for (i=1;i<=x;i++)
{
factvar=factvar*i;
}
return factvar;
}
function fact_function(x)
{
flag+=1;
calc.display.value+=’fact(‘;
}
function power_function(x)
{
flag+=1;
calc.display.value+=’Math.pow(x,y’;
}
function evaluation(calc)
{
n = calc.display.value;
var size = calc.display.value.length;
var lastchar = calc.display.value.charAt(size)
if(isNaN(lastchar) && lastchar!=”)” && lastchar!=”!”) {calc.display.value=”syntax error”;}
else if(flag!=0){calc.display.value=”error:paranthesis”;}
else {
result=eval(n);
calc.display.value=result;}
}
</script>
Looks like you are using strangely encoded tick marks. If you update them to the standard it seems to validate fine.
flag = 0;
function openpara(val) {
calc.display.value += val;
flag += 1;
}
function closepara(valval) {
calc.display.value += valval;
flag -= 1;
}
function backspace(calc) {
var size = calc.display.value.length;
calc.display.value = calc.display.value.substring(0, size - 1);
}
function Resetfunction(calc) {
calc.display.value = "";
flag = 0;
}
function cos_function() {
flag += 1;
calc.display.value += 'Math.cos(';
}
function sin_function() {
flag += 1;
calc.display.value += 'Math.sin(';
}
function tan_function() {
flag += 1;
calc.display.value += 'Math.tan(';
}
function log_function() {
flag += 1;
calc.display.value += 'Math.log(';
}
function sqrt_function() {
flag += 1;
calc.display.value += 'Math.sqrt(';
}
function exp_function() {
flag += 1;
calc.display.value += 'Math.exp(';
}
function fact(x) {
factvar = 1;
for (i = 1; i <= x; i++) {
factvar = factvar * i;
}
return factvar;
}
function fact_function(x) {
flag += 1;
calc.display.value += 'fact(';
}
function power_function(x) {
flag += 1;
calc.display.value += 'Math.pow(x,y';
}
function evaluation(calc) {
n = calc.display.value;
var size = calc.display.value.length;
var lastchar = calc.display.value.charAt(size)
if (isNaN(lastchar) && lastchar != ")" && lastchar != "!") {
calc.display.value = "syntax error";
} else if (flag != 0) {
calc.display.value = "error:paranthesis";
} else {
result = eval(n);
calc.display.value = result;
}
}
I'm trying to make JavaScript calculator. I want to create simple addition function in JavaScript but didn't know how to build that logic, need someone help, and in my code one input text field is present.
Code contain input buttons which is numbers now I need help. So how do I do addition function in JavaScript?
function plus()
{
var textInputval=0;
var textInputval1=2;
var temp=0;
textInputval = parseInt(document.getElementById('new').value);
textInputval1 = parseInt(document.getElementById('new').value);
temp = textInputval + textInputval1;
console.log(textInputval);
console.log(textInputval1);
}
<div id = "cal-container">
<form name="calculator">
<input type="text" name="answer" value="" id="new">
<br>
<input type="button" value=" 1 " onclick="one()" />
<input type="button" value=" 2 " onclick="two()" />
<input type="button" value=" 3 " onclick="three()" />
<input type="button" value=" + " onclick="plus()" />
</form>
</div>
function action(method) {
var a = parseInt(document.getElementById("num1").value);
var b = parseInt(document.getElementById("num2").value);
var result = null;
switch (method) {
case 'add':
result = a + b;
break;
case 'subtract':
result = a - b;
break;
case 'multiply':
result = a * b;
break;
case 'divide':
if (b != 0) {
result = a / b;
} else {
alert('Can\'t divide by 0');
return;
}
break;
}
if (result !== null) {
document.getElementById("result").value = result;
} else {
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
document.getElementById("result").value = "";
}
}
<span style="margin-right:1px">Number 1 </span>
<input id="num1" type="number"></br>
<span style="margin-right:5px">Number 2</span><input id="num2" type="number"></br>
<span style="margin-right:29px">Result</span><input id="result" type="number"> </br>
<button id="add" onclick="action('add')">+</button>
<button id="subtract" onclick="action('subtract')">-</button>
<button id="multiply" onclick="action('multiply')">*</button>
<button id="divide" onclick="action('divide')">/</button>
<button id="clear" onclick="action('clear')">clear</button>
I am new in JavaScript & I am creating a simple calculator.
But I have some problems with the eval() function.
My script:
function calc(fld){
var firstNo = 0 ;
var secNo = 0 ;
var num = fld.name.charAt(2);
var op = fld.name.charAt(0);
if(op == "t"){op = "-";}
else if(op == "z"){op = "*";}
else if(op == "e"){op = "=";}
else if(op == "j"){op = "+";}
else if(op == "d"){op = "/";}
else { op ="";}
if (op != "=") {eval("document.calc1.res").value += num + op ;}
else {
// This line doesn't work correctly
document.calc1.res.value = eval("document.calc1.res.value") ;
// nor this one
// document.calc1.res.value = eval("document.calc1.res").value ;
}
And this is the HTML:
<form id="calc" name="calc1" method="post">
<input type="text" name="res" id="res"><br />
<input type="button" value="7" id="no7" name="no7" onclick="calc(this)"></input type="button" value=""><input type="button" value="8" id="no8" name="no8" onclick="calc(this)"></input type="button" value=""><input type="button" value="9" id="no9" name="no9" onclick="calc(this)"></input type="button" value=""><br />
<input type="button" value="4" id="no4" name="no4" onclick="calc(this)"></input type="button" value=""><input type="button" value="5" id="no5" name="no5" onclick="calc(this)"></input type="button" value=""><input type="button" value="6" id="no6" name="no6" onclick="calc(this)"></input type="button" value=""><br />
<input type="button" value="1" id="no1" name="no1" onclick="calc(this)"></input type="button" value=""><input type="button" value="2" id="no2" name="no2" onclick="calc(this)"></input type="button" value=""><input type="button" value="3" id="no3" name="no3" onclick="calc(this)"></input type="button" value=""><br />
<input type="button" value="-" id="no1" name="t" onclick="calc(this)">
<input type="button" value="*" id="no1" name="z" onclick="calc(this)">
<input type="button" value="=" id="no1" name="e" onclick="calc(this)">
<!--This line works correctly-->
<INPUT TYPE="button" NAME="DoIt" VALUE=" = " OnClick="document.calc1.res.value = eval(document.calc1.res.value)">
<input type="button" value="/" id="no1" name="d" onclick="calc(this)">
<input type="button" value="+" id="no1" name="j" onclick="calc(this)">
</form>
In HTML code there is two equal signs. My problem is there.
When I wanted to evaluate expression in the JS file it did not work, but it was working in HTML file. I mentioned lines with comments.
What are differences between these lines?
1.) DON'T USE eval()! You don't need to.
2.) To get all of the forms in a document, do [document].forms. Then put .calc1 to get a specific form by name then put .res to get a specific field by name.
function calc(num1Elem, opElem, num2Elem){
var num1 = parseInt(num1Elem.value, 10);
if (num2Elem) var num2 = parseInt(num2Elem.value, 10);
var op = opElem.value;
var num;
if(op == "-") num = num1-num2;
else if(op == "*") num = num1*num2;
else if(op == "=") num = num1;
else if(op == "+") num = num1+num2;
else if(op == "/") num = num1/num2;
else op ="";
if (op != "") {
document.forms.calc1.res.value = num;
//Do NOT use eval():
// document.forms.calc1.res.value = eval(num1+op+num2);
// This won't even work if we use the = sign.
}
//The else loop just sets something equal to what it already is, so it's not doing anything, so we can omit it.
}
//Type in one of these lines of code and sees what happens now!
calc(document.forms.calc1.no8, document.forms.calc1.e, document.forms.calc1.no7)
calc(document.forms.calc1.no8, document.forms.calc1.j, document.forms.calc1.no7)
calc(document.forms.calc1.no8, document.forms.calc1.t, document.forms.calc1.no7)
calc(document.forms.calc1.no8, document.forms.calc1.z, document.forms.calc1.no7)
calc(document.forms.calc1.no8, document.forms.calc1.d, document.forms.calc1.no7)
So i have a problem with creating a calculator in HTML and Java script for my homework and i don't know what is wrong with it. For some reason after i added sqrt function buttons are no longer working and i can't realy find an answer, pls help...
JavaScript:
var liczba1,liczba2,znak,flaga_przecinek
function liczba(cyfra)
{
var a = document.getElementById("licz").innerHTML
if(a == "0")document.getElementById("licz").innerHTML = cyfra
else document.getElementById("licz").innerHTML += cyfra
}
function dzialanie(operacja)
{
liczba1 = document.getElementById("licz").innerHTML
znak = operacja
document.getElementById("licz").innerHTML = 0
flaga_przecinek = false
}
function wynik()
{
liczba2 = document.getElementById("licz").innerHTML
var wynik1
switch wynik()
{
case '+': wynik1 = parseFloat(liczba1) + parseFloat(liczba2)
break
case '-': wynik1 = parseFloat(liczba1) - parseFloat(liczba2)
break
case '*': wynik1 = parseFloat(liczba1) * parseFloat(liczba2)
break
case '/': if (liczba2 == '0')
wynik1 = 'Nie można dzielić przez 0'
else
case '/': wynik1 = parseFloat(liczba1) / parseFloat(liczba2)
break
case '^': wynik1 = 1
for (vard i = 1;i<=liczba2;i++)wynik1 = wynik1*liczba1
break
}
if(!isNaN(wynik1)||wynik1 == 'Nie można dzielić przez 0')
document.getElementById("licz").innerHTML = wynik1
else
document.getElementById("licz").innerHTML = 'Nie podałeś liczby'
}
function kasuj()
{
liczba1 = liczba2 = 0
znak = ''
document.getElementById("licz").innerHTML = 0
flaga_przecinek = false
}
function przecinek()
{
if (flaga_przecinek == false)
{
document.getElementById("licz").innerHTML += '.'
flaga_przecinek = true
}
}
function bekspejs()
{
var x = document.getElementById("licz").innerHTML
if(x.charAt(xlenght-1)=='.'flaga_przecinek = false
x = x.slice(0,x.lenght-1)
document.getElementById("licz").innerHTML = x
}
function operacja1(operacja)
{
var x = document.getElementById("licz").innerHTML
switch(operacja)
{
case 'sqrt':x = Math.sqrt(x)
break
case '+/-':x = -1*x
break
}
document.getElementById("licz").innerHTML = x
}
HTML:
<body onload=kasuj()>
<form name=kalkulator>
<p id=licz></p>
<br><br>
<input type="button" value=C onclick=kasuj()>
<input type="button" value="<-" onclick=bekspejs()>
<br><br>
<input type="button" value=1 onclick=liczba(1)>
<input type="button" value=2 onclick=liczba(2)>
<input type="button" value=3 onclick=liczba(3)>
<br>
<input type="button" value=4 onclick=liczba(4)>
<input type="button" value=5 onclick=liczba(5)>
<input type="button" value=6 onclick=liczba(6)>
<br>
<input type="button" value=7 onclick=liczba(7)>
<input type="button" value=8 onclick=liczba(8)>
<input type="button" value=9 onclick=liczba(9)>
<br>
<input type="button" value=0 onclick=liczba(0)>
<input type="button" value=, onclick=przecinek()>
<br><br>
<input type="button" value=+ onclick=dzialanie('+')>
<input type="button" value=- onclick=dzialanie('-')>
<input type="button" value=* onclick=dzialanie('*')>
<input type="button" value=/ onclick=dzialanie('/')>
<input type="button" value=^ onclick=dzialanie('^')>
<br>
<input type="button" value=sqrt onclick=operacja1('sqrt')>
<input type="button" value=+/- onclick=operacja1('+/-')>
<br>
<input type="button" value== onclick=wynik()>
</form>
</body>
try Wrapping all the onclick events and value attributes in double qoutes onclick="przecinek()" value="+"
<input type="button" value="8" onclick="przecinek(8)">
<input type="button" value="9" onclick="przecinek(9)">