Форум

hbsv · #1 (**permalink**) 27.01.2016, 02:10

Подскажите как сделать чтобы отображался не только результат, но и и сам процесс, т.е. ввод.

Так же интересует, как можно сделать, что обращаться только к одному блоку цифр?

Код взял с сайта, и пытаюсь переделать по своему, поэтому есть много ошибок, если кто подскажет буду очень благодарен.

А может и кто подскажет, как самому написать калькулятор в подобным простым стилем или с чего начать.

Заранее Благодарен!

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

Dilettante_Pro · #2 (**permalink**) 27.01.2016, 10:55

hbsv,
Погуглите - и получите кучу информации по калькуляторам, например
http://www.on-line-teaching.com/js/js.math.sample.htm

Dilettante_Pro · #3 (**permalink**) 27.01.2016, 11:54

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 - удаление посимвольно с конца

hbsv · #4 (**permalink**) 28.01.2016, 01:54

Сообщение от Dilettante_Pro

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

Dilettante_Pro · #5 (**permalink**) 28.01.2016, 10:55

hbsv,

Сообщение от hbsv

Но вопрос в том, что мне нужно написать без функции eval

Кто же знал? Об этом ни слова не было.

Dilettante_Pro · #6 (**permalink**) 28.01.2016, 11:21

hbsv,
Нужно преобразование строки calcString в обратную польскую запись и затем вычисление - https://ru.wikipedia.org/wiki/%D0%9E...B8%D1%81%D1%8C
К сожалению, сейчас нет времени, а то бы сделал

hbsv · #7 (**permalink**) 28.01.2016, 13:08

Сообщение от Dilettante_Pro

hbsv,

Кто же знал? Об этом ни слова не было.

Сорри не уточнил!

hbsv · #8 (**permalink**) 28.01.2016, 13:09

Сообщение от Dilettante_Pro

hbsv,
Нужно преобразование строки calcString в обратную польскую запись и затем вычисление - https://ru.wikipedia.org/wiki/%D0%9E...B8%D1%81%D1%8C
К сожалению, сейчас нет времени, а то бы сделал

Спасибо большое, буду изучать по пробую написать!

hbsv · #9 (**permalink**) 28.01.2016, 13:24

А можно ли написать в таком стиле, что бы функция возвращала:

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

hbsv · #10 (**permalink**) 28.01.2016, 13:33

+ Добавить

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;

Чувствую, что должно получиться. Но пока не знаю как ))

Форум

Справочник

Discord чат

Курсы javascript