И снова калькулятор )))
Подскажите как сделать чтобы отображался не только результат, но и и сам процесс, т.е. ввод.
Так же интересует, как можно сделать, что обращаться только к одному блоку цифр? Код взял с сайта, и пытаюсь переделать по своему, поэтому есть много ошибок, если кто подскажет буду очень благодарен. А может и кто подскажет, как самому написать калькулятор в подобным простым стилем или с чего начать. Заранее Благодарен!
<form id="calculator">
<table>
<tr>
<td>
<div align="center">
<label for="result"></label>
<input type="text" id="result" name="result" size="16" readonly="readonly" class="display">
</div>
</td>
</tr>
<tr>
<td class="buttons">
<div id="num1" align="center">
<input type="button" onclick="addToInput1(this.value)" name="rakam11" value="1" />
<input onclick="addToInput1(this.value)" type="button" name="rakam22" value="2" />
<input onclick="addToInput1(this.value)" type="button" name="rakam33" value="3" />
<input onclick="addToInput1(this.value)" type="button" name="rakam44" value="4" />
<input onclick="addToInput1(this.value)" type="button" name="rakam55" value="5" />
<input onclick="addToInput1(this.value)" type="button" name="rakam66" value="6" />
<input onclick="addToInput1(this.value)" type="button" name="rakam77" value="7" />
<input onclick="addToInput1(this.value)" type="button" name="rakam88" value="8" />
<input onclick="addToInput1(this.value)" type="button" name="rakam99" value="9" />
<input onclick="addToInput1(this.value)" type="button" name="rakam00" value="0" />
</div>
<div id="act" align="center">
<input onclick="addToInput3(this.value)" type="button" name="plus" value="+" />
<input onclick="addToInput3(this.value)" type="button" name="minus" value="-" />
<input onclick="addToInput3(this.value)" type="button" name="umn" value="*" />
<input onclick="addToInput3(this.value)" type="button" name="delit" value="/" />
</div>
<div id="num2" align="center">
<input onclick="addToInput2(this.value)" type="button" name="rakam1" value="1" />
<input onclick="addToInput2(this.value)" type="button" name="rakam2" value="2" />
<input onclick="addToInput2(this.value)" type="button" name="rakam3" value="3" />
<input onclick="addToInput2(this.value)" type="button" name="rakam4" value="4" />
<input onclick="addToInput2(this.value)" type="button" name="rakam5" value="5" />
<input onclick="addToInput2(this.value)" type="button" name="rakam6" value="6" />
<input onclick="addToInput2(this.value)" type="button" name="rakam7" value="7" />
<input onclick="addToInput2(this.value)" type="button" name="rakam8" value="8" />
<input onclick="addToInput2(this.value)" type="button" name="rakam9" value="9" />
<input onclick="addToInput2(this.value)" type="button" name="rakam0" value="0" />
</div>
<tr>
<td colspan="2"><input type="button" name="button" id="button" onclick="kalk()" value="Считать" />
<input type="button" name="button1" onclick="clean()" value="CLEAN" /></td>
</tr>
</table>
</form>
function kalk(){
var n1=document.getElementById('num1').value;
var n2=document.getElementById('num2').value;
n1=parseFloat(n1);
n2=parseFloat(n2);
var a=document.getElementById('act').value;
var r=0;
if(a=='+') r=n1+n2;
if(a=='-') r=n1-n2;
if(a=='*') r=n1*n2;
if(a=='/'){
if(n2==0){
alert("на 0 делить нельзя");
document.getElementById("num2").value="";
document.getElementById("num2").focus();
}
else r=n1/n2;
}
document.getElementById("result").value=r;
}
function addToInput1(value) {
document.querySelector('#num1').value += value;
}
function addToInput3(value) {
document.querySelector('#act').value += value;
}
function addToInput2(value) {
document.querySelector('#num2').value += value;
}
function clean() {
document.querySelector('#num1').value = '';
document.querySelector('#num2').value = '';
document.querySelector('#act').value = '';
document.querySelector('#result').value = '';
}
|
hbsv,
Погуглите - и получите кучу информации по калькуляторам, например http://www.on-line-teaching.com/js/js.math.sample.htm |
hbsv,
Вот ваш калькулятор с выброшенным лишним и небольшими добавлениями
<!DOCTYPE html>
<html>
<head>
<title>Calc</title>
<script type="text/javascript">
var calcString = "";
function kalk() {
var res = eval(calcString);
document.getElementById("res").innerHTML = calcString + "=" + res;
}
function addToInput(value) {
calcString += value;
document.getElementById("res").innerHTML = calcString;
}
function clean() {
calcString = "";
document.getElementById("res").innerHTML = calcString;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="res" style="width:400px;height:20px;border:solid 1px black;">
</div>
</td>
</tr>
<tr>
<td class="buttons">
<div id="num1" align="center">
<input type="button" onclick="addToInput(this.value)" name="rakam11" value="1" />
<input onclick="addToInput(this.value)" type="button" name="rakam22" value="2" />
<input onclick="addToInput(this.value)" type="button" name="rakam33" value="3" />
<input onclick="addToInput(this.value)" type="button" name="rakam44" value="4" />
<input onclick="addToInput(this.value)" type="button" name="rakam55" value="5" />
<input onclick="addToInput(this.value)" type="button" name="rakam66" value="6" />
<input onclick="addToInput(this.value)" type="button" name="rakam77" value="7" />
<input onclick="addToInput(this.value)" type="button" name="rakam88" value="8" />
<input onclick="addToInput(this.value)" type="button" name="rakam99" value="9" />
<input onclick="addToInput(this.value)" type="button" name="rakam00" value="0" />
</div>
<div id="act" align="center">
<input onclick="addToInput(this.value)" type="button" name="plus" value="+" />
<input onclick="addToInput(this.value)" type="button" name="minus" value="-" />
<input onclick="addToInput(this.value)" type="button" name="umn" value="*" />
<input onclick="addToInput(this.value)" type="button" name="delit" value="/" />
</div>
<tr>
<td colspan="2"><input type="button" name="button" id="button" onclick="kalk()" value="Считать" />
<input type="button" name="button1" onclick="clean()" value="CLEAN" /></td>
</tr>
</table>
</body>
</html>
Можно еще добавить кнопки с точкой, скобками, DEL - удаление посимвольно с конца |
Цитата:
Но вопрос в том, что мне нужно написать без функции eval |
hbsv,
Цитата:
|
hbsv,
Нужно преобразование строки calcString в обратную польскую запись и затем вычисление - https://ru.wikipedia.org/wiki/%D0%9E...B8%D1%81%D1%8C К сожалению, сейчас нет времени, а то бы сделал |
Цитата:
|
Цитата:
|
А можно ли написать в таком стиле, что бы функция возвращала:
function add (a, b){
a + b;
return (a + b);
}
function subtract(a, b){
a - b;
return (a - b);
}
function multiply(a, b){
a * b;
return (a * b);
}
function divide(a, b){
a / b;
return (a / b);
}
|
+ Добавить
function calculate() {
B = getValue("");
switch(action) {
case "+":
C = A + B;
break;
case "-":
C = A - B;
break;
case "*":
C = A * B;
break;
case "/":
if (B == 0) {
alert("Нельзя делить на ноль!");
}
else {
C = A / B;
}
break;
}
document.getElementById("").value = C;
Чувствую, что должно получиться. Но пока не знаю как )) |
Цитата:
Заранее очень благодарен! |
Кто может помочь собрать калькулятор бесплатно на форуме или платно ($/час) в скайпе (hbsv-mtt):
<form name="taschenrechner" id="calculator">
<table>
<tr>
<td>
<input type="text" id="input" name="input" size="16" class="display">
</td>
</tr>
<tr>
<td class="buttons">
<input type="button" id="btn_1" value="1" OnClick="addInput(1)">
<input type="button" id="btn_2" value="2" OnClick="addInput(2)">
<input type="button" id="btn_3" value="3" OnClick="addInput(3)">
<input type="button" id="add" value="+" onclick="addOperator('+')">
<br>
<input type="button" id="btn_4" value="4" OnClick="addInput(4)">
<input type="button" id="btn_5" value="5" OnClick="addInput(5)">
<input type="button" id="btn_6" value="6" OnClick="addInput(6)">
<input type="button" id="sub" value="-" OnClick="addOperator('-')">
<br>
<input type="button" id="btn_7" value="7" OnClick="addInput(7)">
<input type="button" id="btn_8" value="8" OnClick="addInput(8)">
<input type="button" id="btn_9" value="9" OnClick="addInput(9)">
<input type="button" id="mult" value="x" OnClick="addOperator('*')">
<br>
<input type="button" id="clear" value="c" onClick="clear()">
<input type="button" id="btn_0" value="0" OnClick="addInput(0)">
<input type="button" id="calculate" value="=" OnClick="calc()">
<input type="button" id="div" value="/" OnClick="addOperator('/')">
</td>
</tr>
</table>
</form>
/**
* Created by hbsv on 31.01.2016.
*/
var a,b,c;
var action = '';
var input = document.getElementById('input');
function addInput(x) {
var res = document.getElementById(x).value - '';
if (!isNaN(res))
return res;
}
function PutNum(val) {
document.getElementById('input').value = (document.getElementById('input').value + val);
}
function add(a,b) {
action = '+';
a = addInput('input');
document.getElementById('input').value = (a + b);
return (a + b);
function sub(a,b) {
action = '-';
a = addInput('input');
document.getElementById('input').value = (a - b);
return (a + b);
}
function mult(a,b) {
action = '*';
a = addInput('input');
document.getElementById('input').value = (a * b);
return (a * b);
}
function div(a,b) {
action = '/';
a = addInput('input');
document.getElementById('input').value = (a / b);
return (a / b);
}
function clear() {
document.getElementById('input').value = '';
}
function calculate() {
b = addInput('input');
switch (action) {
case '+':
c = a + b;
break;
case '-':
c = a - b;
break;
case '*':
c = a * b;
break;
case '/':
c = a / b;
break
}
document.getElementById('input').value = c;
}
Очень нужна помощь, нужно собрать калькулятор при этом научиться самому его собирать )) Заранее Оч. Благодарен! |
Или еще лучше, с помощью методов
function Calculator() {
var methods = {
"+" : function(a,b) {
return a + b;
},
"-" : function(a,b) {
return a - b;
},
"*" : function(a,b) {
return a * b;
},
"/" : function(a,b) {
return a / b;
}
}
}
|
Вот вроде сделал
<!DOCTYPE html>
<html>
<head>
<title>Calc</title>
<script type="text/javascript">
var calcString = "";
function control(testString) {
testString = testString.replace(/\++/g, "+");
testString = testString.replace(/\--/g, "+");
testString = testString.replace(/\.\./g, ".");
testString = testString.replace(/[+-][-+]/g, "-");
return testString;
}
function calculation(buffString) {
buffString = buffString.replace(/([^[0-9.]{1})/g, " $1 ").trim(); // добавим пробелы вокруг не чисел
buffString = buffString.replace(/ {1,}/g, " "); // удаление сдвоенных пробелов
var buffArray = buffString.split(/\s/); // Элементы - в массив
var polishString = new Array;
var polishStack = new Array;
var stringId = -1;
var stackId = -1;
for (var i = 0; i < buffArray.length; i++) { // формируем обратную польскую запись
switch (buffArray[i]) {
case "(":
stackId++;
polishStack[stackId] = buffArray[i];
break;
case ")":
while (stackId >= 0 && polishStack[stackId] != "(") {
stringId++;
polishString[stringId] = polishStack[stackId];
stackId--;
}
stackId--;
break;
case "+":
while (stackId >= 0 && (polishStack[stackId] == "+" || polishStack[stackId] == "-" || polishStack[stackId] == "*" || polishStack[stackId] == "/")) {
stringId++;
polishString[stringId] = polishStack[stackId];
stackId--;
}
stackId++;
polishStack[stackId] = buffArray[i];
break;
case "-":
while (stackId >= 0 && (polishStack[stackId] == "+" || polishStack[stackId] == "-" || polishStack[stackId] == "*" || polishStack[stackId] == "/")) {
stringId++;
polishString[stringId] = polishStack[stackId];
stackId--;
}
stackId++;
polishStack[stackId] = buffArray[i];
break;
case "*":
while (stackId >= 0 && (polishStack[stackId] == "*" || polishStack[stackId] == "/")) {
stringId++;
polishString[stringId] = polishStack[stackId];
stackId--;
}
stackId++;
polishStack[stackId] = buffArray[i];
break;
case "/":
while (stackId >= 0 && (polishStack[stackId] == "*" || polishStack[stackId] == "/")) {
stringId++;
polishString[stringId] = polishStack[stackId];
stackId--;
}
stackId++;
polishStack[stackId] = buffArray[i];
break;
default:
stringId++;
polishString[stringId] = buffArray[i];
}
}
while (stackId >= 0) {
stringId++;
polishString[stringId] = polishStack[stackId];
stackId--;
} // польская запись готова
// alert(polishString);
stackId = -1; // Начинаем считать по польской записи
var stringIdMax = stringId;
for (stringId = 0; stringId <= stringIdMax; stringId++ ) {
switch (polishString[stringId]) {
case "+":
stackId--;
polishStack[stackId] = polishStack[stackId] + polishStack[stackId + 1];
break;
case "-":
stackId--;
polishStack[stackId] = polishStack[stackId] - polishStack[stackId + 1];
break;
case "*":
stackId--;
polishStack[stackId] = polishStack[stackId] * polishStack[stackId + 1];
break;
case "/":
stackId--;
polishStack[stackId] = polishStack[stackId] / polishStack[stackId + 1];
break;
default:
stackId++;
polishStack[stackId] = parseFloat(polishString[stringId]);
}
}
return polishStack[stackId];
}
function kalk() {
try {
var res = calculation(calcString);
} catch (e) { res = "Ошибка в выражении"; }
document.getElementById("res").innerHTML = calcString + "=" + res;
}
function addToInput(value) {
calcString += value;
calcString = control(calcString);
document.getElementById("res").innerHTML = calcString;
}
function clean() {
calcString = "";
document.getElementById("res").innerHTML = calcString;
}
function del() {
calcString = calcString.substr(0,calcString.length - 1);
document.getElementById("res").innerHTML = calcString;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="res" style="width:400px;min-height:20px;border:solid 1px black;">
</div>
</td>
</tr>
<tr>
<td class="buttons">
<div id="num1" align="center">
<input type="button" onclick="addToInput(this.value)" name="rakam11" value="1" />
<input onclick="addToInput(this.value)" type="button" name="rakam22" value="2" />
<input onclick="addToInput(this.value)" type="button" name="rakam33" value="3" />
<input onclick="addToInput(this.value)" type="button" name="rakam44" value="4" />
<input onclick="addToInput(this.value)" type="button" name="rakam55" value="5" />
<input onclick="addToInput(this.value)" type="button" name="rakam66" value="6" />
<input onclick="addToInput(this.value)" type="button" name="rakam77" value="7" />
<input onclick="addToInput(this.value)" type="button" name="rakam88" value="8" />
<input onclick="addToInput(this.value)" type="button" name="rakam99" value="9" />
<input onclick="addToInput(this.value)" type="button" name="rakam00" value="0" />
<input onclick="addToInput(this.value)" type="button" name="rakam00" value="." />
</div>
<div id="act" align="center">
<input onclick="addToInput(this.value)" type="button" name="plus" value="+" />
<input onclick="addToInput(this.value)" type="button" name="minus" value="-" />
<input onclick="addToInput(this.value)" type="button" name="umn" value="*" />
<input onclick="addToInput(this.value)" type="button" name="divide" value="/" />
<input onclick="addToInput(this.value)" type="button" name="lpar" value="(" />
<input onclick="addToInput(this.value)" type="button" name="rpar" value=")" />
</div>
</td>
<tr>
<td ><input type="button" name="button" id="button" onclick="kalk()" value="Считать" />
<input type="button" name="button1" onclick="clean()" value="CLEAN" />
<input type="button" name="button1" onclick="del()" value="DEL" /></td>
</tr>
</table>
</body>
</html>
Осталась масса простору для доработок |
Спасибо Огромнейшее!
|
Если есть возможность подскажите еще пару вопросов:
Имеется калькулятор:
<from id = 'calculator'>
<table>
<tr>
<td>
<div align="center">
<input id="screen" type="text" value="" size="16" class="display" readonly="readonly" />
</div>
</td>
</tr>
<tr>
<td class="buttons">
<div align="center">
<input id="btn_1" type="button" value="1" />
<input id="btn_2" type="button" value="2" />
<input id="btn_3" type="button" value="3" />
<input id="add" type="button" value="+" class="operator" />
</div>
<div align="center">
<input id="btn_4" type="button" value="4" />
<input id="btn_5" type="button" value="5" />
<input id="btn_6" type="button" value="6" />
<input id="sub" type="button" value=" - " class="operator" />
</div>
<input id="btn_7" type="button" value="7" />
<input id="btn_8" type="button" value="8" />
<input id="btn_9" type="button" value="9" />
<input id="mult" type="button" value=" * " class="operator" />
<div align="center">
<input id="clr" type="button" value=" c " class="clear" />
<input id="btn_0" type="button" value="0" />
<input id="calculate" type="button" value=" = " class="eval" />
<input id="div" type="button" value=" / " class="operator" />
</div>
</td>
</tr>
</table>
</from>
var a,b,c;
var action = '';
function getValue(id) {
var res = document.getElementById(id).value - '';
if (!isNaN(res))
return res;
}
function PutNum(val) {
document.getElementById("screen").value = (document.getElementById("screen").value + val)-0;
}
function add () {
a = getValue("screen");
document.getElementById("screen").value = 0;
action = "+";
}
function sub() {
a = getValue("screen");
document.getElementById("screen").value = 0;
action = "-";
}
function mult() {
a = getValue("screen");
document.getElementById("screen").value = 0;
action = "*";
}
function div() {
a = getValue("screen");
document.getElementById("screen").value = 0;
action = "/";
}
function clr() {
document.getElementById("screen").value = 0;
}
function calculate() {
b = getValue("screen");
switch(action) {
case "+":
c = a + b;
break;
case "-":
c = a - b;
break;
case "*":
c = a * b;
break;
case "/":
if (b == 0) {
alert('Division durch Null kann nicht sein!');
}
else {
c = a / b;
}
break;
}
document.getElementById("screen").value = c;
}
window.onload = function () {
for (var i = 0; i < 10; i++) {
(function (val) {
document.getElementById("btn_" + val).onclick = function () {
PutNum(val);
}
})(i);
}
document.getElementById("add").addEventListener("click", add);
document.getElementById("calculate").addEventListener("click", calculate);
document.getElementById("sub").addEventListener("click", sub);
document.getElementById("mult").addEventListener("click", mult);
document.getElementById("div").addEventListener("click", div);
document.getElementById("clr").addEventListener("click", clr);
}
1 -й Вопрос что делает функция:
function PutNum(val) {
document.getElementById("screen").value = (document.getElementById("screen").value + val)-0;
Как я понимаю: велью а + атрибут велью б и минус 0. Можно ли как то проще написать или это вполне адекватно? )) В исполнении 0 получается промежуточное значение, т.е. оператор, как его заменить на само значение оператора, чтоб вместо ноля в калькуляторе отображался + - / *. Пробовал заменить, но минус считает криво. 2-й Вопрос, что делает эта функция, для чего используется цикл:
window.onload = function () {
for (var i = 0; i < 10; i++) {
(function (val) {
document.getElementById("btn_" + val).onclick = function () {
PutNum(val);
}
})(i);
}
document.getElementById("add").addEventListener("click", add);
document.getElementById("calculate").addEventListener("click", calculate);
document.getElementById("sub").addEventListener("click", sub);
document.getElementById("mult").addEventListener("click", mult);
document.getElementById("div").addEventListener("click", div);
document.getElementById("clr").addEventListener("click", clr);
}
3 - й Вопрос, можно ли этот код допиписать с использованием методов:
function Calculator() {
var methods = {
"+" : function(a,b) {
return a + b;
},
"-" : function(a,b) {
return a - b;
},
"*" : function(a,b) {
return a * b;
},
"/" : function(a,b) {
return a / b;
}
}
}
Заранее очень Благодарен! |
hbsv,
Цитата:
-0 дает то, что если это будет не цифра, то возникнет ошибка. Зачем - непонятно, т. к. эта функция привязана к клавишам ввода цифр. Без -0 все точно так же работает. Цитата:
Цитата:
Ну а как вам моя последняя версия? Есть вопросы, замечания? |
Цитата:
Цитата:
Цитата:
Я рассмотрел два варианта на jQuery и Вашу работу методом обратной польской записи, и для меня это пока, что рано. Сначала надо освоить основы чистого js) Еще раз большое спасибо, ваш пример, дал мне хорошее понимание в целом ) |
Калькулятор простой
hbsv,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.screen{
border: 1px solid #8B4513;
width: 120px;
display: inline-block;
border-radius: 2px;
text-align: right;
}
.calculator{
width: 120px;
text-align: center;
}
.calculator input{
width: 20%;
}
</style>
</head>
<body>
<form>
<table class="calculator">
<tr>
<td>
<span class="screen" >0</span>
</td>
</tr>
<tr>
<td>
<input class="button" type="button" value="1" />
<input class="button" type="button" value="2" />
<input class="button" type="button" value="3" />
<input class="button" type="button" value="+" />
</td>
</tr>
<tr>
<td>
<input class="button" type="button" value="4" />
<input class="button" type="button" value="5" />
<input class="button" type="button" value="6" />
<input class="button" type="button" value="-" />
</td>
</tr>
<tr>
<td>
<input class="button" type="button" value="7" />
<input class="button" type="button" value="8" />
<input class="button" type="button" value="9" />
<input class="button" type="button" value="*" />
</td>
</tr>
<tr>
<td>
<input class="button" type="button" value="c" />
<input class="button" type="button" value="0" />
<input class="button" type="button" value="=" />
<input class="button" type="button" value="/" />
</td>
</tr>
</table>
</form>
<script>
window.addEventListener("DOMContentLoaded", function() {
var calculator = document.querySelector(".calculator"),
screen = document.querySelector(".screen");
var methods = {
a: 0,
b: 0,
"+": function() {
return this.a += this.b
},
"-": function() {
return this.a -= this.b
},
"*": function() {
return this.a *= this.b
},
"/": function() {
return this.a /= this.b
},
out: function(a) {
screen.innerHTML = a
},
fix: function(a) {
return (this[a] * 100 | 0) / 100
},
cur: 0,
res: function(a) {
if (a == +a)
if (!this.cur) {
this.a = +(this.a + "" + a);
this.out(this.fix("a"))
}
else {
this.b = +(this.b + "" + a);
this.out(this.fix("a") + this.cur + this.fix("b"))
}
else if (a == "c")
{
this.b = this.a = this.cur = 0;
this.out(0)
}
else if (this.cur) {
if (!this.b && this.cur == "/") {
this.out("err");
return
}
!this.b && this.cur != "*" && (this.b = this.a);
this[this.cur]();
this.out(this.fix("a"));
this.b = 0;
this.cur = a == "=" ? 0 : a
}
else if (a != "=") {
this.out(this.fix("a") + a);
this.cur = a
}
}
};
calculator.addEventListener("click", function(event) {
var cls = event.target.classList;
if (cls && cls.contains("button")) {
val = event.target.value;
methods.res(val)
}
})
});
</script>
</body>
</html>
|
Огромнейшее Всем спасибо за Помощь!
Все вопросы решил, кроме одного. Вопрос с нулем остался. Может есть у кого какие идеи переписать или решить? |
Пока выходит так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<from id="calculator">
<table>
<tr>
<td>
<div align="center">
<input id="screen" type="text" value="" size="16" class="display" readonly="readonly" />
</div>
</td>
</tr>
<tr>
<td class="buttons">
<div align="center">
<input id="btn_1" type="button" value="1" onclick="addInput(1)"/>
<input id="btn_2" type="button" value="2" onclick="addInput(2)"/>
<input id="btn_3" type="button" value="3" onclick="addInput(3)" />
<input id="add" type="button" value="+" class="operator" onclick="add()" />
</div>
<div align="center">
<input id="btn_4" type="button" value="4" onclick="addInput(4)" />
<input id="btn_5" type="button" value="5" onclick="addInput(5)" />
<input id="btn_6" type="button" value="6" onclick="addInput(6)" />
<input id="sub" type="button" value=" - " onclick="sub()" class="operator" />
</div>
<input id="btn_7" type="button" value="7" onclick="addInput(7)" />
<input id="btn_8" type="button" value="8" onclick="addInput(8)" />
<input id="btn_9" type="button" value="9" onclick="addInput(9)" />
<input id="mult" type="button" value=" * " onclick="mult()" class="operator" />
<div align="center">
<input id="clr" type="button" value=" c " onclick="clr()" class="clear" />
<input id="btn_0" type="button" value="0" onclick="addInput(0)" />
<input id="calculate" type="button" value=" = " onclick="calculate()" class="eval" />
<input id="div" type="button" value=" / " onclick="div()" class="operator" />
</div>
</td>
</tr>
</table>
</from>
</body>
<script type="text/javascript" language="javascript" src="main.js"></script>
</html>
и js
"use strict";
var a,b,c;
var action = "";
function getValue(value) {
var res = document.getElementById(value).value - '';
if (!isNaN(res))
return res;
}
function addInput(val) {
document.getElementById("screen").value = (document.getElementById("screen").value + val)-"";
}
function add () {
a = getValue("screen");
document.getElementById("screen").value = "";
action = "+";
}
function sub() {
a = getValue("screen");
document.getElementById("screen").value = "";
action = "-";
}
function mult() {
a = getValue("screen");
document.getElementById("screen").value = "";
action = "*";
}
function div() {
a = getValue("screen");
document.getElementById("screen").value = "";
action = "/";
}
function clr() {
document.getElementById("screen").value = "";
}
function calculate() {
b = getValue("screen");
switch(action) {
case "+":
c = a + b;
break;
case "-":
c = a - b;
break;
case "*":
c = a * b;
break;
case "/":
if (b == 0) {
alert('Division durch Null kann nicht sein!');
}
else {
c = a / b;
}
break;
}
document.getElementById("screen").value = c;
}
|
hbsv,
Почему вы не делаете работающих примеров? Например, такой:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<script type="text/javascript">
"use strict";
var a, b, c;
var action = "";
function getValue(value) {
var res = parseInt(document.getElementById(value).value);
if (res == res)
return res;
}
function addInput(val) {
document.getElementById("screen").value = (document.getElementById("screen").value + val);
}
function add() {
a = getValue("screen");
document.getElementById("screen").value = "";
action = "+";
}
function sub() {
a = getValue("screen");
document.getElementById("screen").value = "";
action = "-";
}
function mult() {
a = getValue("screen");
document.getElementById("screen").value = "";
action = "*";
}
function div() {
a = getValue("screen");
document.getElementById("screen").value = "";
action = "/";
}
function clr() {
document.getElementById("screen").value = "";
}
function calculate() {
b = getValue("screen");
switch (action) {
case "+":
c = a + b;
break;
case "-":
c = a - b;
break;
case "*":
c = a * b;
break;
case "/":
if (b == 0) {
alert('Division durch Null kann nicht sein!');
}
else {
c = a / b;
}
break;
}
document.getElementById("screen").value = c;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<div align="center">
<input id="screen" type="text" value="" size="16" class="display" readonly="readonly" />
</div>
</td>
</tr>
<tr>
<td class="buttons">
<div align="center">
<input id="btn_1" type="button" value="1" onclick="addInput(this.value)" />
<input id="btn_2" type="button" value="2" onclick="addInput(2)" />
<input id="btn_3" type="button" value="3" onclick="addInput(3)" />
<input id="add" type="button" value="+" class="operator" onclick="add()" />
</div>
<div align="center">
<input id="btn_4" type="button" value="4" onclick="addInput(4)" />
<input id="btn_5" type="button" value="5" onclick="addInput(5)" />
<input id="btn_6" type="button" value="6" onclick="addInput(6)" />
<input id="sub" type="button" value=" - " onclick="sub()" class="operator" />
</div>
<input id="btn_7" type="button" value="7" onclick="addInput(7)" />
<input id="btn_8" type="button" value="8" onclick="addInput(8)" />
<input id="btn_9" type="button" value="9" onclick="addInput(9)" />
<input id="mult" type="button" value=" * " onclick="mult()" class="operator" />
<div align="center">
<input id="clr" type="button" value=" c " onclick="clr()" class="clear" />
<input id="btn_0" type="button" value="0" onclick="addInput(0)" />
<input id="calculate" type="button" value=" = " onclick="calculate()" class="eval" />
<input id="div" type="button" value=" / " onclick="div()" class="operator" />
</div>
</td>
</tr>
</table>
</body>
</html>
Как говорится, найди семь отличий (хотя, может, и не семь) |
Сорри не знал как сделать работающий код))
Как работает эта функция, в чем ее смысл?
function getValue(value){
var res = parseInt(document.getElementById(value).value);
if (res == res)
return res;
По поводу нуля и минуса, я вот что имел ввиду, сейчас вставлю работающий код, сделайте любое вычитание и Вы меня поймете))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<from id="calculator">
<table>
<tr>
<td>
<div align="center">
<input id="screen" type="text" value="" size="16" class="display" readonly="readonly" />
</div>
</td>
</tr>
<tr>
<td class="buttons">
<div align="center">
<input type="button" value="1" onclick="addInput(1)"/>
<input type="button" value="2" onclick="addInput(2)"/>
<input type="button" value="3" onclick="addInput(3)" />
<input type="button" value="+" class="operator" onclick="add()" />
</div>
<div align="center">
<input type="button" value="4" onclick="addInput(4)" />
<input type="button" value="5" onclick="addInput(5)" />
<input type="button" value="6" onclick="addInput(6)" />
<input type="button" value=" - " onclick="sub()" class="operator" />
</div>
<input type="button" value="7" onclick="addInput(7)" />
<input type="button" value="8" onclick="addInput(8)" />
<input type="button" value="9" onclick="addInput(9)" />
<input type="button" value=" * " onclick="mult()" class="operator" />
<div align="center">
<input type="button" value=" c " onclick="clr()" class="clear" />
<input type="button" value="0" onclick="addInput(0)" />
<input type="button" value=" = " onclick="calculate()" class="eval" />
<input type="button" value=" / " onclick="div()" class="operator" />
</div>
</td>
</tr>
</table>
</from>
</body>
<script>
"use strict";
var a,b,c;
var operator;
function getValue(value){
var res = parseInt(document.getElementById(value).value);
if (res == res)
return res;
}
//function getValue(value) {
// var res = document.getElementById(value).value - "";
// if (!isNaN(res))
// return res;
//}
function addInput(val) {
document.getElementById("screen").value = document.getElementById("screen").value + val;
}
function add () {
a = getValue("screen");
document.getElementById("screen").value = "+";
operator = "+";
}
function sub() {
a = getValue("screen");
document.getElementById("screen").value = "-";
operator = "-";
}
function mult() {
a = getValue("screen");
document.getElementById("screen").value = "*";
operator = "*";
}
function div() {
a = getValue("screen");
document.getElementById("screen").value = "/";
operator = "/";
}
function clr() {
document.getElementById("screen").value = "";
}
function calculate() {
b = getValue("screen");
switch(operator) {
case "+":
c = a + b;
break;
case "-":
c = a - b;
break;
case "*":
c = a * b;
break;
case "/":
if (b == 0) {
alert('Division durch Null kann nicht sein!');
}
else {
c = a / b;
}
break;
}
document.getElementById("screen").value = c;
}
</script>
</html>
Я хочу, чтобы в промежуточном значении, отображался оператор, если я так делаю как в примере выше, то получается косяк с минусом. Можно ли как то этот минус на минус исправить? или уже ничего не поделаешь? |
Вот на работающем примере сразу стали понятны ваши проблемы.
Нельзя смешивать в одном input значения и операции, т.к. в результате происходит задвоение операторов. Их, конечно, легко отфильтровать при вводе данных из input, но возникает другая проблема: минус может быть как оператором, так и частью значения, например, как результат вычисления 1-2=-1. Поэтому операторы лучше показывать в другом input. При этом бонус - появляется возможность вести полный протокол
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<table>
<tr>
<td>
<input id="action" type="text" value="" size="16" class="display" readonly="readonly" />
</td>
<td>
<input id="screen" type="text" value="" size="16" class="display" readonly="readonly" />
</td>
</tr>
</table>
<table>
<tr>
<td><input type="button" value="1" onclick="addInput(1)"/></td>
<td><input type="button" value="2" onclick="addInput(2)"/></td>
<td><input type="button" value="3" onclick="addInput(3)" /></td>
<td><input type="button" value="+" class="operator" onclick="add()" /></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="addInput(4)" /></td>
<td><input type="button" value="5" onclick="addInput(5)" /></td>
<td><input type="button" value="6" onclick="addInput(6)" /></td>
<td><input type="button" value=" - " onclick="sub()" class="operator" /></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="addInput(7)" /></td>
<td><input type="button" value="8" onclick="addInput(8)" /></td>
<td><input type="button" value="9" onclick="addInput(9)" /></td>
<td><input type="button" value=" * " onclick="mult()" class="operator" /></td>
</tr>
<tr>
<td><input type="button" value=" c " onclick="clr()" class="clear" /></td>
<td><input type="button" value="0" onclick="addInput(0)" /></td>
<td><input type="button" value=" = " onclick="calculate()" class="eval" /></td>
<td><input type="button" value=" / " onclick="div()" class="operator" /></td></td>
</tr>
</table>
</body>
<script>
"use strict";
var a, b, c;
var operator;
function getValue(value) {
var res = parseInt(document.getElementById(value).value);
if (res == res)
return res;
}
function addInput(val) {
document.getElementById("screen").value = document.getElementById("screen").value + val;
document.getElementById("action").value = document.getElementById("action").value + val;
}
function add() {
a = getValue("screen");
document.getElementById("action").value = document.getElementById("action").value + "+";
document.getElementById("screen").value = "";
operator = "+";
}
function sub() {
a = getValue("screen");
document.getElementById("action").value = document.getElementById("action").value + "-";
document.getElementById("screen").value = "";
operator = "-";
}
function mult() {
a = getValue("screen");
document.getElementById("action").value = document.getElementById("action").value + "*";
document.getElementById("screen").value = "";
operator = "*";
}
function div() {
a = getValue("screen");
document.getElementById("action").value = document.getElementById("action").value + "/";
document.getElementById("screen").value = "";
operator = "/";
}
function clr() {
document.getElementById("action").value = "";
document.getElementById("screen").value = "";
}
function calculate() {
b = getValue("screen");
switch (operator) {
case "+":
c = a + b;
break;
case "-":
c = a - b;
break;
case "*":
c = a * b;
break;
case "/":
if (b == 0) {
alert('Division durch Null kann nicht sein!');
}
else {
c = a / b;
}
break;
}
document.getElementById("screen").value = c;
document.getElementById("action").value = document.getElementById("action").value + "=" + c;
}
</script>
</html>
|
Я понял, спасибо большое. Либо так либо так)
А в чем же суть, этой функции? Чем она отличается от логики !isNan?
function getValue(value){
var res = parseInt(document.getElementById(value).value);
if (res == res)
return res;
}
|
Функция isNaN не всегда дает правильный результат. Если интересно - погуглите. Зато NaN не равно NaN всегда
|
А так считать?
А так считать не пробовали?
34+5/3*6= ???? Добавьте правила и логику. Будет идеально. Сперва умножение, деление, потом уже сложение. Не? |
feniks81,
Прочитайте всю тему, особенно про польскую запись. Попробуйте ваш пример там. И потом, это идеи, наброски, а не завершенная работа |
Цитата:
|
| Часовой пояс GMT +3, время: 19:13. |