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)
Related
I am having trouble, as you can see in code, for the result3 as id i have op1, what I would like to have there so that it works is that id changes depending on the button pressed, how can I do that? because now every button is like a +.
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
</head>
<script>
function getResult()
{
var result1 = document.getElementById("number1").value;
var result3 = document.getElementById ("op1").value;
var result2 = document.getElementById("number2").value;
calculate (result1,result3,result2);
}
function calculate(num1,operator,num2)
{
if (operator== '+')
{
var res1 = parseFloat(num1)+parseFloat(num2);
alert(res1);
}
else if (operator== '-')
{
var res2 = parseFloat(num1)-parseFloat(num2);
alert(res2);
}
else if (operator== '*')
{
var res3 = parseFloat(num1)*parseFloat(num2);
alert(res3);
}
else if (operator== '/')
{
var res4 = parseFloat(num1)/parseFloat(num2);
alert(res4);
}
else
{
alert("Nothing from above!");
}
}
</script>
<body>
<form action="get" method="#">
<input type="text" name="text1" value="" id="number1" /> <br/>
<input type="text" name="text2" value="" id="number2" /> <br/>
<input type="button" name="o1" value="+" id="op1" onclick="getResult();"/>
<input type="button" name="o2" value="-" id="op2" onclick="getResult();"/>
<input type="button" name="o3" value="*" id="op3" onclick="getResult();"/>
<input type="button" name="o4" value="/" id="op4" onclick="getResult();"/>
<input type="button" name="calc" value="Calculate" onclick="getResult();"/>
</form>
</body>
</html>
You are always calling the value of input with id="op1", which is + in your case. Why not pass the value?
getResult(id) {
var result1 = document.getElementById("number1").value;
var result3 = document.getElementById (id).value;
var result2 = document.getElementById("number2").value;
calculate (result1,result3,result2);}
The id is passed when calling the function:
<input type="button" name="o1" value="+" id="op1" onclick="getResult(id);"/>
<input type="button" name="o2" value="-" id="op2" onclick="getResult(id);"/>
<input type="button" name="o3" value="*" id="op3" onclick="getResult(id);"/>
<input type="button" name="o4" value="/" id="op4" onclick="getResult(id);"/>
Calculate button won't work this way, but this is a quick fix with your setup. Good luck.
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 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?
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)">
Hi I have a question how can I upgrade my script that it can disable remaining buttons after you pressed five of them? Now it only count them.
My code:
<input type="Button" onclick="window.increment(event)" value="2"/>
<input type="Button" onclick="window.increment(event)" value="3"/>
<input type="Button" onclick="window.increment(event)" value="4"/>
<input type="Button" onclick="window.increment(event)" value="5"/>
<input type="Button" onclick="window.increment(event)" value="6"/>
<input type="Button" onclick="window.increment(event)" value="7"/>
<input type="Button" onclick="window.increment(event)" value="8"/>
<div>
<p>You've choose <a id="clicks">0</a> slot/s.</p>
</div>
Link to js:
https://jsfiddle.net/57js0ps7/6/
Here's as little as possible edited code that works but isn't that readable.
https://jsfiddle.net/90yw1buf/
HTML
<input type="Button" class="bt" onclick="window.increment(event)" value="1"/>
<input type="Button" class="bt" onclick="window.increment(event)" value="2"/>
<input type="Button" class="bt" onclick="window.increment(event)" value="3"/>
<input type="Button" class="bt" onclick="window.increment(event)" value="4"/>
<input type="Button" class="bt" onclick="window.increment(event)" value="5"/>
<input type="Button" class="bt" onclick="window.increment(event)" value="6"/>
<input type="Button" class="bt" onclick="window.increment(event)" value="7"/>
<input type="Button" class="bt" onclick="window.increment(event)" value="8"/>
<div>
<p>You've choose <a id="clicks">0</a> slot/s.</p>
</div>
JS
window.increment = function(event) {
var btn = event.target;
btn.clicks = ((btn.clicks || 0) + 1) % 2;
window.clicks = (window.clicks || 0) + btn.clicks * 2 - 1;
document.getElementById("clicks").innerText = window.clicks;
var buttons = document.getElementsByClassName("bt");
var i;
if(window.clicks > 4) {
for (i = 0; i < buttons.length; i++) {
if(buttons[i].clicks != 1) {
buttons[i].disabled = true;
} else {
buttons[i].disabled = false;
}
}
} else {
for (i = 0; i < buttons.length; i++) {
buttons[i].disabled = false;
}
}
}
Try not to pollute the global scope (window) because it's a space that all the scripts on your page share, and you should keep shared space clean because you don't know what other scripts might assign a global variable called "click". Read up on closures and scope for some good ideas on how to avoid putting things in the global scope.
You should use classes instead of IDs because IDs must be unique, but classes don't have to be.
It's better to use addEventListener to put event listeners on your elements because an element can only have a single "onclick" function but they can have as many event listeners as they need.
Finally, don't use an anchor (<a>) tag unless it's intended to be clickable, and if it is, you need to include an href attribute`.
(function(){
var clicks = 0;
var buttons = Array.from(document.getElementsByClassName("bt"));
buttons.forEach(btn=>{
btn.addEventListener("click", ()=>{
clicks++;
document.getElementById("clicks").innerText = clicks;
btn.disabled = true;
if(5 === clicks) buttons.forEach(b=>b.disabled = true);
}, false)
});
})();
<input type="Button" class="bt" value="2"/>
<input type="Button" class="bt" value="3"/>
<input type="Button" class="bt" value="4"/>
<input type="Button" class="bt" value="5"/>
<input type="Button" class="bt" value="6"/>
<input type="Button" class="bt" value="7"/>
<input type="Button" class="bt" value="8"/>
<div>
<p>You've choose <span id="clicks">0</span> slot/s.</p>
</div>
I think this is what you are looking for?
var clickedCount = 0;
var arr = [0,0,0,0,0,0,0,0];
function count (buttonNo) {
if (arr[buttonNo-1] == 0) {
clickedCount ++;
arr[buttonNo-1] = 1
}
if (clickedCount >=5) {
var buttons = document.getElementsByTagName('button');
for (var i=0; i < buttons.length; i++) {
if(arr[i]==0){
buttons[i].disabled = 'disabled';
}
}
}
}
<div>
<button onclick="count(1)">button1</button>
<button onclick="count(2)">button2</button>
<button onclick="count(3)">button3</button>
<button onclick="count(4)">button4</button>
<button onclick="count(5)">button5</button>
<button onclick="count(6)">button6</button>
<button onclick="count(7)">button7</button>
<button onclick="count(8)">button8</button>
</div>