Cant change value of input box when I click a button - javascript

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;
}

Related

JavaScript - How to prevent multiple operator inputs? (addition & subtraction)

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>

How to have javascript code on a different file then html?

I am constructing a calculator and this is my html for the calculator
HTML
<div id=”calculator”>
<input type="text" name="display" id="display" disabled>
<div class="first-row">
<input type="button" name="operator" value="+" action="add">
<input type="button" name="operator" value="-" action="subtract">
<input type="button" name="operator" value="*" action="multiple">
<input type="button" name="operator" value="/" action="divide">
</div>
<div class="second-row">
<input type="button" class="number" value="7">
<input type="button" class="number" value="8">
<input type="button" class="number" value="9">
</div>
<div class="third-row">
<input type="button" class="number" value="4">
<input type="button" class="number" value="5">
<input type="button" class="number" value="6">
</div>
<div class="fourth-row">
<input type="button" class="number" value="1">
<input type="button" class="number" value="2">
<input type="button" class="number" value="3">
</div>
<div class="fifth-row">
<input type="button" class="number" value="0" onclick="numberPress('0')">
<input type="button" class="operator" value="=">
</div>
</div>
<script type="text/javascript" src="../javascript/calculator.js"></script>
So in my javascript code, it checks if the button clicked is a operator, then if it is, then it prints out "operator" in the console.
Javascript
const calculator = document.getElementById("calculator")
calculator.addEventListener("click", e => {
if (e.target.matches("input")) {
key = e.target
name = e.target.name
if(name == "operator") {
console.log("operator")
}
}
})
The problem is that for the first line, it does not find the calculator id and it stores null in calculator. So, I tried putting the javascript in the same file, but still it does not work.
Any help will be very appreciated
You are not using this character "
You are using this character ”
So you are writing ”calculator” instead of "calculator" in your HTML
You must use plain quote marks in HTML

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

I need help with my virtual keyboard, On my keyboard there is a DIV that i use to make button value="MAG" work in javascript but i'm using the same DIV to make the keyboard work and write but using one Div with the same id="Div1" doesn't work for me ... so i have to chose between ((Writing using the keyboard .... or changing the keyboard from MAG to MIN )) not both !! .... here is my code and and as you can see you can only write using the keyboard but you can not use MAG button .... i'm sorry for my bad English ...
<html>
<head>
<style type="text/css">
#Div1{
display: block;
}
#Div2 {
display: none;
}
.divs
{
width: 50px;
height: 50px;
border: 1px solid #000;
}
</style>
<style type="text/css">
*{margin:0;padding:0;}
*{margin:0;padding:0;}</style>
<script>
(function() {
'use strict';
var i,c;
function init(){
/* get all the input elements within the div whose id is "keyboard */
i=document.getElementById('Div1').getElementsByTagName('input');
/* loop through all the elements */
for(c=0;c<i.length;c++) {
/* find all the the input type="button" elements */
if(i[c].type==='button') {
/* add an onclick handler to each of them and set the function to call */
i[c].addEventListener('onclick',makeClickHandler(c));
}
}
/* this is the type="reset" input */
document.getElementById('clear').onclick=function() {
/* remove all the characters from the input type="text" element */
document.getElementById('text').value='';
}
}
function makeClickHandler(c) {
i[c].onclick=function() {
/* find the non-text button which has an id */
if(i[c].id==='back') {
/* remove last character from the input the type="text" element using regular expression */
document.getElementById('text').value=
document.getElementById('text').value.replace(/.$/,'');
}
/* find the text buttons */
else {
/* add characters to the input type="text" element */
document.getElementById('text').value+=this.value.toLowerCase();
}
};
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
})();
</script>
</head>
<body>
<div id="Div1">
<div>
<input value="1" type="button">
<input value="2" type="button">
<input value="3" type="button">
<input value="4" type="button">
<input value="5" type="button">
<input value="6" type="button">
<input value="7" type="button">
<input value="8" type="button">
<input value="9" type="button">
<input value="0" type="button">
<input value="Borrar" type="button">
</div><div>
<input value="q" type="button">
<input value="w" type="button">
<input value="e" type="button">
<input value="r" type="button">
<input value="t" type="button">
<input value="y" type="button">
<input value="u" type="button">
<input value="i" type="button">
<input value="o" type="button">
<input value="p" type="button">
<input value="`" type="button">
<input value="+" type="button">
</div><div><input value="a" type="button">
<input value="s" type="button">
<input value="d" type="button">
<input value="f" type="button">
<input value="g" type="button">
<input value="h" type="button">
<input value="j" type="button">
<input value="k" type="button">
<input value="l" type="button">
<input value="ñ" type="button">
<input value="´" type="button">
<input value="ç" type="button">
</div><div>
<input value="<" type="button">
<input value="z" type="button">
<input value="x" type="button">
<input value="c" type="button">
<input value="v" type="button">
<input value="b" type="button">
<input value="n" type="button">
<input value="m" type="button">
<input value="+" type="button">
<input value="." type="button">
<input value="-" type="button">
<input disabled="disabled" value=" " type="button">
</div><div>
<input id="Button1" value="MAG." type="button" onclick="switchVisible();">
<input value=" " type="button">
<input id="Button1" value="MAG." type="button" onclick="switchVisible();">
</div></div>
<div id="Div2" style="display:none" class="keyboard"><div>
<input value="!" type="button">
<input value=""" type="button">
<input value="·" type="button">
<input value="$" type="button">
<input value="%" type="button">
<input value="&" type="button">
<input value="/" type="button">
<input value="(" type="button">
<input value=")" type="button">
<input value="=" type="button">
<input value="Borrar" type="button">
</div><div>
<input value="Q" type="button">
<input value="W" type="button">
<input value="E" type="button">
<input value="R" type="button">
<input value="T" type="button">
<input value="Y" type="button">
<input value="U" type="button">
<input value="I" type="button">
<input value="O" type="button">
<input value="P" type="button">
<input value="^" type="button">
<input value="*" type="button">
</div><div>
<input value="A" type="button">
<input value="S" type="button">
<input value="D" type="button">
<input value="F" type="button">
<input value="G" type="button">
<input value="H" type="button">
<input value="J" type="button">
<input value="K" type="button">
<input value="L" type="button">
<input value="Ñ" type="button">
<input value="¨" type="button">
<input value="Ç" type="button">
</div><div>
<input value=">" type="button">
<input value="Z" type="button">
<input value="X" type="button">
<input value="C" type="button">
<input value="V" type="button">
<input value="B" type="button">
<input value="N" type="button">
<input value="M" type="button">
<input value=";" type="button">
<input value=":" type="button">
<input value="_" type="button">
<input disabled="disalbed" value="" type="button">
</div><div>
<input id="Button1" value="Min." type="button" onclick="switchVisible();">
<input value=" " type="button">
<input id="Button1" value="Min." type="button" onclick="switchVisible();">
</div></div></div></div>
<div>
<label>Track Search</label> - <input id="text" type="text" readonly="readonly">
</div>
<script type="text/javascript">
function switchVisible() {
var div1=document.getElementById('Div1');
var div2=document.getElementById('Div2');
if (div1 !== undefined && div2 !== undefined) {
div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block';
div2.style.display = div1.style.display === 'block' ? 'none' : 'block';
}
}
</script>
</body>
</html>
There are a few issues that need to be addressed:
Major issues:
Console JS error - there is no button with an ID of "clear".
I didn't see a button with an ID of "back"
I'm guessing it's the "Borrar" button, but it lacks an ID.
It would also need to be skipped by the loop in the init function discussed in the next point.
There are 4 <input id="Button1"...:
IDs need to be unique.
But these buttons do need a class or id to prevent the makeClickHandler from attaching an onclick function and overriding the inline onclick defintiion.
/* find all the the input type="button" elements */
if(i[c].type==='button' && (i[c].id !== "Button1" || i[c].id !== "back")) {
/* add an onclick handler to each of them and set the function to call */
i[c].addEventListener('onclick',makeClickHandler(c));
}
Minor issues:
Move the IIFE script in the <head> to the bottom of the page; then you won't need to add an event listener for "onload".
The code is almost unreadable. Please use indention properly and be consistent!
There's an input with a misspelled disable - disabled="disalbed"
By convention, element id's shouldn't start with a capital letter.
Avoid using onclick or any inline javascript. This is called a separation of concerns.
Brush up/learn about event delegation; it'll make the code cleaner.

Prevent an arithmetic operator from immediately following another one

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);
}
}

Simple Calaculator in HTML and Javascript does not work

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

Categories