How do you prevent inputs of more than one operator?
Like to add validation if I press + it will show operation and if I press - since the last character is + should replace it.
And if the last character is + then I press + again, it should not append another plus like ++.
Here is the code:
function ins(val) {
document.getElementById("txtField").value += val
}
function clr() {
document.getElementById("txtField").value = ""
}
function solve() {
let x = document.getElementById("txtField").value
let y = eval(x)
document.getElementById("txtField").value = y
}
body {
background-color: whitesmoke;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h2>Add & Sub by CJ</h2>
<input type="text" id="txtField" readonly>
<br>
<input type="button" value="1" onclick="ins('1')">
<input type="button" value="2" onclick="ins('2')">
<input type="button" value="3" onclick="ins('3')">
<br>
<input type="button" value="4" onclick="ins('4')">
<input type="button" value="5" onclick="ins('5')">
<input type="button" value="6" onclick="ins('6')">
<br>
<input type="button" value="7" onclick="ins('7')">
<input type="button" value="8" onclick="ins('8')">
<input type="button" value="9" onclick="ins('9')">
<br>
<input type="button" value="0" onclick="ins('0')">
<br>
<br>
<input type="button" value="-" onclick="ins('-')">
<input type="button" value="+" onclick="ins('+')">
<input type="button" value="Clear" onclick="clr()">
<input type="button" value="=" onclick="solve()">
<br>
</body>
</html>
You also can try this:)
function ins(val) {
let str = document.getElementById("txtField").value;
let size = document.getElementById("txtField").value.length-1;
if(val!=='+'&&val!=='-'){
document.getElementById("txtField").value += val
}else{
if(size>-1){
if(document.getElementById("txtField").value.charAt(size)!=='+' && document.getElementById("txtField").value.charAt(size)!=='-'){
document.getElementById("txtField").value += val
}else {
if(val==='-'){
if(document.getElementById("txtField").value.charAt(size)==='+'){
document.getElementById("txtField").value=str.substring(0,size)+val
}
}else{
if(document.getElementById("txtField").value.charAt(size)==='-'){
document.getElementById("txtField").value=str.substring(0,size)+val
}
}
}
}
}
}
function clr() {
document.getElementById("txtField").value = ""
}
function solve() {
let x = document.getElementById("txtField").value
let y = eval(x)
document.getElementById("txtField").value = y
}
body {
background-color: whitesmoke;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h2>Add & Sub by CJ</h2>
<input type="text" id="txtField" readonly>
<br>
<input type="button" value="1" onclick="ins('1')">
<input type="button" value="2" onclick="ins('2')">
<input type="button" value="3" onclick="ins('3')">
<br>
<input type="button" value="4" onclick="ins('4')">
<input type="button" value="5" onclick="ins('5')">
<input type="button" value="6" onclick="ins('6')">
<br>
<input type="button" value="7" onclick="ins('7')">
<input type="button" value="8" onclick="ins('8')">
<input type="button" value="9" onclick="ins('9')">
<br>
<input type="button" value="0" onclick="ins('0')">
<br>
<br>
<input type="button" value="-" onclick="ins('-')">
<input type="button" value="+" onclick="ins('+')">
<input type="button" value="Clear" onclick="clr()">
<input type="button" value="=" onclick="solve()">
<br>
</body>
</html>
I updated your code please check now it will work according to your requirements. Happy coding !
var i=-1;var j=-1;
function ins(val) {
i=-1;
j=-1;
var str= document.getElementById("txtField").value += val;
}
function minsins(val) {
j++
if(j==0){
var str= document.getElementById("txtField").value += val;
}
}
function plusins(val) {
i++
if(i==0){
var str= document.getElementById("txtField").value += val;
}
}
function clr() {
document.getElementById("txtField").value = ""
}
function solve() {
let x = document.getElementById("txtField").value
let y = eval(x)
document.getElementById("txtField").value = y
}
body {
background-color: whitesmoke;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h2>Add & Sub by CJ</h2>
<input type="text" id="txtField" readonly>
<br>
<input type="button" value="1" onclick="ins('1')">
<input type="button" value="2" onclick="ins('2')">
<input type="button" value="3" onclick="ins('3')">
<br>
<input type="button" value="4" onclick="ins('4')">
<input type="button" value="5" onclick="ins('5')">
<input type="button" value="6" onclick="ins('6')">
<br>
<input type="button" value="7" onclick="ins('7')">
<input type="button" value="8" onclick="ins('8')">
<input type="button" value="9" onclick="ins('9')">
<br>
<input type="button" value="0" onclick="ins('0')">
<br>
<br>
<input type="button" value="-" onclick="minsins('-')">
<input type="button" value="+" onclick="plusins('+')">
<input type="button" value="Clear" onclick="clr()">
<input type="button" value="=" onclick="solve()">
<br>
</body>
</html>
Related
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.
Hey guys I'm trying to make a simple JavaScript calculator.Right now I'm just trying to change the input box to display the button I clicked, but I'm having trouble figuring out why its not working. here's my code.
var display = document.getElementById('display');
function toScreen(x) {
display ='';
display.textContent = x;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Javascript Calculator</h1>
<div id="calculator">
<form>
<input type="text" id="display" disabled>
<br>
<input type="button" value="C" id="keys" onclick="toScreen('c')">
<input type="button" value="CE" id="keys" onclick="clearEntry('c')">
<input type="button" value="x^2" id="keys" onclick="powerOf('c')">
<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="x" id="keys" onclick="toScreen('x')">
<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="equal()">
</form>
<h3>Javascript Calculator</h3>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
I have attached the working code here. If you wish to just replace the text in input remove + from the function.
var display = document.getElementById('display');
function toScreen(x) {
display.value += x;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Javascript Calculator</h1>
<div id="calculator">
<form>
<input type="text" id="display" disabled>
<br>
<input type="button" value="C" id="keys" onclick="toScreen('c')">
<input type="button" value="CE" id="keys" onclick="clearEntry('c')">
<input type="button" value="x^2" id="keys" onclick="powerOf('c')">
<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="x" id="keys" onclick="toScreen('x')">
<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="equal()">
</form>
<h3>Javascript Calculator</h3>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
approch 1:
function toScreen(x) {
document.getElementById("display").value= x;
}
approach 2:
if you want to keep display outiside of the method then you have to keep whole code below( i.e before body end tag). As per you current code you are trying access the element before dom is getting loaded
var display = document.getElementById("display");
code :
var display = document.getElementById("display");
function toScreen(x) {
display.value =x;
}
</script>
</body>
Lets see the problem with the code
In following statement you are assigning the text object by finding element and it is fine.
var display = document.getElementById('display');
In following statement you are overriding text object with empty string, means there is not textbox object in display variable and here is the problem.
display ='';
What you need to do to clear text box content is
display.value='';
The textContent property sets or returns the text content of the specified node and not to play with text box value. You need to use value property instead.
so final code must be like below
var display = document.getElementById('display');
function toScreen(x) {
display.value ='';//Even this is not required because already over writing text in following statement
display.value = x;
}
I have written a calculator script which currently allows me to type invalid input values like 5*****5. Such inputs (where one arithmetic operator like *, + etc immediately follows another) should be restricted because they make no sense. How can I modify my code to restrict such inputs?
function c(val) {
var1 = $("#bar").val(val);
}
function v(val) {
var2 = $("#bar").val($("#bar").val() + val);
}
function equal() {
var3 = c(eval($("#bar").val()));
}
function reset() {
var4 = $("#bar").val("");
}
$(document).ready(function() {
$("#backspace").click(function() {
var barValue = $("#bar").val();
$("#bar").val(barValue.substring(0, barValue.length - 1));
});
});
<p>
<input type="text" id="bar" size="15" readonly>
<input type="button" value="C" onclick="reset('')">
</p>
<p>
<input type="button" value="←" id="backspace">
<input type="button" value="" onclick="">
<input type="button" value="" onclick="">
<input type="button" value="" onclick="">
<input type="button" value="" onclick="">
</p>
<p>
<input type="button" value="7" onclick="v('7')">
<input type="button" value="8" onclick="v('8')">
<input type="button" value="9" onclick="v('9')">
<input type="button" value="/" onclick="v('/')">
<input type="button" value="" onclick="">
</p>
<p>
<input type="button" value="4" onclick="v('4')">
<input type="button" value="5" onclick="v('5')">
<input type="button" value="6" onclick="v('6')">
<input type="button" value="*" onclick="v('*')">
<input type="button" value="" onclick="">
</p>
<p>
<input type="button" value="1" onclick="v('1')">
<input type="button" value="2" onclick="v('2')">
<input type="button" value="3" onclick="v('3')">
<input type="button" value="-" onclick="v('-')">
<input type="button" value="" onclick="">
</p>
<p>
<input type="button" value="0" onclick="v('0')">
<input type="button" value="." onclick="v('.')">
<input type="button" value="+" onclick="v('+')">
<input type="button" value="=" onclick="equal()" id="equal">
<input type="button" value="" onclick="">
</p>
<div id="history"></div>
Here is a JSFiddle Link to the full source.
Use regular expressions. Test to see if last value is +,-,*,or /
If the lastChar matches this criteria and so does the passed value do not do anything.
function v(val) {
var patt = /\+|\-|\*|\//
var barValue = $("#bar").val();
var lastChar = barValue.substring(barValue.length, barValue.length - 1);
if (patt.test(lastChar) && patt.test(val)) {
//do nothing as current val and lastChar are mathematical characters
} else {
//update the formula
var2 = $("#bar").val($("#bar").val() + val);
}
}
I am a total beginner and attempting to make a calculator in Javascript.
When I click on a button I want the value of that button inserted in to a textfield?
Here what i tried and had zero result.
<!-- Html Coding --->
<form name="cal">
<input name="text1" type="text" placeholder="enter value here" /><br/>
<input name="num1" type="button" value="1" onClick="num1()"/>
</form>
<!-- JavaScript coding --->
<script>
function num1()
{
document.cal.text1.value = "1";
}
</script>
Please keep it as simple as possible because im not a native English
function numberClick(value) {
document.cal.text1.value = value;
}
<form name="cal">
<input name="text1" type="text" placeholder="enter value here" /><br/>
<input name="num1" type="button" value="1" onClick="numberClick(this.value)"/>
<input name="num2" type="button" value="2" onClick="numberClick(this.value)"/>
<input name="num3" type="button" value="3" onClick="numberClick(this.value)"/>
</form>
<!-- Html Coding --->
<input name="text1" type="text" placeholder="enter value here" /><br/>
<input name="num1" type="button" value="1" onClick ="num1(this)"/>
<input name="num2" type="button" value="2" />
<input name="num3" type="button" value="3" />
<!-- JavaScript coding --->
<script>
function num1(obj)
{
$('input[name=text1]').val($(obj).attr("value"));
}
</script>
demo
i got this code for calculator with html and javascript, this will help you, use only for reference
<html>
<head>
<script language="javascript">
var flag=0,a,b,c;
function perform(value)
{
if(flag==0)
{
b=parseInt(value);
a=f1.t1.value;
document.f1.t1.value='';
flag=1;
}
else
{
c=f1.t1.value;
document.f1.t1.value='';
if(b==1)
{
var d=parseFloat(a)+parseFloat(c);
document.f1.t1.value=d;
}
else if(b==2)
{
var d=parseFloat(a)-parseFloat(c);
document.f1.t1.value=d;
}
else if(b==3)
{
var d=parseFloat(a)*parseFloat(c);
document.f1.t1.value=d;
}
else
{
var d=parseFloat(a)/parseFloat(c);
document.f1.t1.value=d;
}
flag=0;
}
}
</script>
</head>
<body><center>
<font color="green" size="6" face="elephant"><b><u>CALCULATOR</u></b></font>
</br></br></br>
<table border="2" bordercolor="green" cellpadding="2" >
<tr>
<td><form name="f1">
<input type="text" name="t1" id="txt1">
</form></td></tr>
<tr>
<td><form name="f2">
<input type="button" value=" 1 " onclick="document.f1.t1.value+='1'" >
<input type="button" value=" 2 " onclick="document.f1.t1.value+='2'">
<input type="button" value=" 3 " onclick="document.f1.t1.value+='3'">
<input type="button" value=" + " onclick="perform(1)"></br>
<input type="button" value=" 4 " onclick="document.f1.t1.value+='4'">
<input type="button" value=" 5 " onclick="document.f1.t1.value+='5'">
<input type="button" value=" 6 " onclick="document.f1.t1.value+='6'">
<input type="button" value=" - " onclick="perform(2)"></br>
<input type="button" value=" 7 " onclick="document.f1.t1.value+='7'">
<input type="button" value=" 8 " onclick="document.f1.t1.value+='8'">
<input type="button" value=" 9 " onclick="document.f1.t1.value+='9'">
<input type="button" value=" * " onclick="perform(3)"></br>
<input type="button" value=" 0 " onclick="document.f1.t1.value+='0'">
<input type="button" value=" / " onclick="perform(4)">
<input type="button" value=" = " onclick="perform(value)">
<input type="reset" value= " clr " onclick="document.f1.t1.value='' ">
</form></td>
</tr>
</table>
</center>
</body>
</html>
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