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)">
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.
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've an assignment for school in which I have to do a basic calculator using JS, but I can't get the result returned into the textbox. Here's my code:
<form>
<input type="textbox" id="val1"> Primo valore
<br><br>
<input type="textbox" id="val2"> Secondo valore
<br><br>
<script>
function getFloatValue(x) {
var xf = parseFloat(x.value)
return xf
}
</script>
<script>
var a = document.getElementById("val1")
var b = document.getElementById("val2")
var af = getFloatValue(a)
var bf = getFloatValue(b)
function calculate(a,b,op) {
var r
switch (op.value) {
case '+': return a+b
case '-': return a-b
case '/': return a/b
case '*': return a*b
}
}
</script>
<input type="button" value="+" onclick="document.getElementById('result').value = calculate(af, bf, '+')">
<input type="button" value="-" onclick="document.getElementById('result').value = calculate(af, bf, '-')">
<input type="button" value="/" onclick="document.getElementById('result').value = calculate(af, bf, '/')">
<input type="button" value="*" onclick="document.getElementById('result').value = calculate(af, bf, '*')">
<br><br>
<input type="textbox" id="result" value=''> Risultato
<br><br>
<input type="reset" name="reset" value="Resetta tutto">
</form>
I've made lots of tries, but noone of these worked :\
Thank you in advance :D
Instead of passing variables, Pass element ID attributes so that we can access elements using id
op.value does not make sense as you are passing hard-coded string for signs
function getFloatValue(x) {
return parseFloat(x.value);
}
function calculate(a, b, op) {
var a = document.getElementById(a);
var b = document.getElementById(b);
a = getFloatValue(a);
b = getFloatValue(b);
var r
switch (op) {
case '+':
return a + b
case '-':
return a - b
case '/':
return a / b
case '*':
return a * b
}
}
<form>
<input type="textbox" id="val1">Primo valore
<br>
<br>
<input type="textbox" id="val2">Secondo valore
<br>
<br>
<input type="button" value="+" onclick="document.getElementById('result').value = calculate('val1', 'val2', '+')">
<input type="button" value="-" onclick="document.getElementById('result').value = calculate('val1', 'val2', '-')">
<input type="button" value="/" onclick="document.getElementById('result').value = calculate('val1', 'val2', '/')">
<input type="button" value="*" onclick="document.getElementById('result').value = calculate('val1', 'val2', '*')">
<br>
<br>
<input type="textbox" id="result" value=''>Risultato
<br>
<br>
<input type="reset" name="reset" value="Resetta tutto">
</form>
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
In my code I have five radio buttons with one set checked by default. When I click on a radio button the function setMode() is called but the test to check which button is checked fails.
When the same radio button is clicked a second time setMode() is called the test will return true.
The test is if(document.getElementById("rcool").checked)
I have tried changing the mouse events and the test eg. .checked=="true" and .checked=="checked".
I have searched and only found similar topics in jQuery which I am unfamiliar with so could not make sense of them.
I am using Firefox 47.0 and have checked for errors using Firebug 2.0.17.
I am not very sure how to use Firebug and don't know what to try next.
Any help or comments are greatly appreciated.
var options = ["power=off","mode=heat","temp=20"];
var temp = 20;
function power() {
var pwr = document.getElementById("powerBtn");
var pwrtxt;
if(pwr.innerHTML=="OFF"){
pwrtxt = "power=on";
pwr.innerHTML = "ON";
}
else {
pwrtxt = "power=off";
pwr.innerHTML = "OFF";
}
options[0] = pwrtxt;
document.getElementById("textOutput").value = options;
}
function setMode(){
if(document.getElementById("rheat").checked)
options[1] = "mode=heat";
if(document.getElementById("rcool").checked)
options[1] = "mode=cool";
if(document.getElementById("rdry").checked)
options[1] = "mode=dry";
if(document.getElementById("rauto").checked)
options[1] = "mode=auto";
if(document.getElementById("recono").checked)
options[1] = "mode=econo";
document.getElementById("textOutput").value = options;
}
function updateTemp(){
var tempString = "temp=";
options[2] = tempString.concat("",temp);
document.getElementById("textOutput").value = options;
}
function increaseTemp(){
temp += 1;
if(temp>31) {
temp = 31;
}
updateTemp();
}
function decreaseTemp(){
temp -= 1;
if(temp < 16){
temp = 16;
}
updateTemp();
}
function stopTime(){
}
function startTime(){
}
function incTime(){
}
function decTime(){
}
<!DOCTYPE html>
<html>
<body>
<button type="button" id="powerBtn" onmouseup="power()">OFF</button>
<button type="button" id="increase" onmouseup="increaseTemp()">Up</button>
<button type="button" id="decrease" onmouseup="decreaseTemp()">Down</button>
<br>
<input type="radio" id="rheat" name="mode" onmouseup="setMode()" value="heat" checked="checked">HEAT<br>
<input type="radio" id="rcool" name="mode" onmouseup="setMode()" value="cool">COOL<br>
<input type="radio" id="rdry" name="mode" onmouseup="setMode()" value="dry">DRY<br>
<input type="radio" id="rauto" name="mode" onmouseup="setMode()" value="auto">AUTO<br>
<input type="radio" id="recono" name="mode" onmouseup="setMode()" value="econo">ECONOCOOL<br>
<br>
<button type="button" id="stopTmr" onmouseup="stopTime()">Stop Time</button>
<button type="button" id="startTimer" onmouseup="startTime()">Start Timer</button>
<br>
<button type="button" id="incTime" onmouseup="incTime()">Increase Time</button>
<button type="button" id="decTime" onmouseup="decTime()">Decrease Time</button>
<form action="action_page.php">
<textarea id="textOutput" name="message" rows="10" cols="30"></textarea>
<br>
<input type="submit">
</form>
</body>
</html>
To launch a function when a radio button is clicked, you must use onchange event, not onclick/onmouseup. onchange gracefully wait for the radio button to be effectively clicked/updated before calling the function.
var options = ["power=off","mode=heat","temp=20"];
var temp = 20;
window.onload=function(){document.getElementById("textOutput").value = options;}
function power() {
var pwr = document.getElementById("powerBtn");
var pwrtxt;
if(pwr.innerHTML=="OFF"){
pwrtxt = "power=on";
pwr.innerHTML = "ON";
}
else {
pwrtxt = "power=off";
pwr.innerHTML = "OFF";
}
options[0] = pwrtxt;
document.getElementById("textOutput").value = options;
}
function setMode(){
if(document.getElementById("rheat").checked)
options[1] = "mode=heat";
if(document.getElementById("rcool").checked)
options[1] = "mode=cool";
if(document.getElementById("rdry").checked)
options[1] = "mode=dry";
if(document.getElementById("rauto").checked)
options[1] = "mode=auto";
if(document.getElementById("recono").checked)
options[1] = "mode=econo";
document.getElementById("textOutput").value = options;
}
function updateTemp(){
var tempString = "temp=";
options[2] = tempString.concat("",temp);
document.getElementById("textOutput").value = options;
}
function increaseTemp(){
temp += 1;
if(temp>31) {
temp = 31;
}
updateTemp();
}
function decreaseTemp(){
temp -= 1;
if(temp < 16){
temp = 16;
}
updateTemp();
}
function stopTime(){
}
function startTime(){
}
function incTime(){
}
function decTime(){
}
<!DOCTYPE html>
<html>
<body>
<button type="button" id="powerBtn" onmouseup="power()">OFF</button>
<button type="button" id="increase" onmouseup="increaseTemp()">Up</button>
<button type="button" id="decrease" onmouseup="decreaseTemp()">Down</button>
<br>
<input type="radio" id="rheat" name="mode" onchange="setMode()" value="heat" checked="checked">HEAT<br>
<input type="radio" id="rcool" name="mode" onchange="setMode()" value="cool">COOL<br>
<input type="radio" id="rdry" name="mode" onchange="setMode()" value="dry">DRY<br>
<input type="radio" id="rauto" name="mode" onchange="setMode()" value="auto">AUTO<br>
<input type="radio" id="recono" name="mode" onchange="setMode()" value="econo">ECONOCOOL<br>
<br>
<button type="button" id="stopTmr" onmouseup="stopTime()">Stop Time</button>
<button type="button" id="startTimer" onmouseup="startTime()">Start Timer</button>
<br>
<button type="button" id="incTime" onmouseup="incTime()">Increase Time</button>
<button type="button" id="decTime" onmouseup="decTime()">Decrease Time</button>
<form action="action_page.php">
<textarea id="textOutput" name="message" rows="10" cols="30"></textarea>
<br>
<input type="submit">
</form>
</body>
</html>
Normally I put listeners on those radio buttons and identify them when they are clicked. It seems you prefer the old school way of doing it so I didn't change much in your code but added a paramter in your setMode() function called mode. Basically the mode is already defined when setMode() is called so you don't have to check each radio button anymore. switch() here can assign relative value to options[1] according to mode. Have a go with it and good luck.
var options = ["power=off","mode=heat","temp=20"];
var temp = 20;
function power() {
var pwr = document.getElementById("powerBtn");
var pwrtxt;
if(pwr.innerHTML=="OFF"){
pwrtxt = "power=on";
pwr.innerHTML = "ON";
}
else {
pwrtxt = "power=off";
pwr.innerHTML = "OFF";
}
options[0] = pwrtxt;
document.getElementById("textOutput").value = options;
}
function setMode( mode ){
switch ( mode ) {
case 'rheat':
options[1] = "mode=heat";
break;
case 'rcool':
options[1] = "mode=cool";
break;
case 'rdry':
options[1] = "mode=dry";
break;
case 'rauto':
options[1] = "mode=auto";
break;
case 'recono':
options[1] = "mode=econo";
break;
}
document.getElementById("textOutput").value = options;
}
function updateTemp(){
var tempString = "temp=";
options[2] = tempString.concat("",temp);
document.getElementById("textOutput").value = options;
}
function increaseTemp(){
temp += 1;
if(temp>31) {
temp = 31;
}
updateTemp();
}
function decreaseTemp(){
temp -= 1;
if(temp < 16){
temp = 16;
}
updateTemp();
}
function stopTime(){
}
function startTime(){
}
function incTime(){
}
function decTime(){
}
<button type="button" id="powerBtn" onmouseup="power()">OFF</button>
<button type="button" id="increase" onmouseup="increaseTemp()">Up</button>
<button type="button" id="decrease" onmouseup="decreaseTemp()">Down</button>
<br>
<input type="radio" id="rheat" name="mode" onmouseup="setMode('rheat')" value="heat" checked="checked">HEAT<br>
<input type="radio" id="rcool" name="mode" onmouseup="setMode('rcool')" value="cool">COOL<br>
<input type="radio" id="rdry" name="mode" onmouseup="setMode('rdry')" value="dry">DRY<br>
<input type="radio" id="rauto" name="mode" onmouseup="setMode('rauto')" value="auto">AUTO<br>
<input type="radio" id="recono" name="mode" onmouseup="setMode('recono')" value="econo">ECONOCOOL<br>
<br>
<button type="button" id="stopTmr" onmouseup="stopTime()">Stop Time</button>
<button type="button" id="startTimer" onmouseup="startTime()">Start Timer</button>
<br>
<button type="button" id="incTime" onmouseup="incTime()">Increase Time</button>
<button type="button" id="decTime" onmouseup="decTime()">Decrease Time</button>
<form action="action_page.php">
<textarea id="textOutput" name="message" rows="10" cols="30"></textarea>
<br>
<input type="submit">
</form>
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?