ab_ayo Ответов: 2

Я хочу изменить эту программу так, чтобы значения вычислялись, когда я выполняю операцию, а не нажимаю кнопку equals


This is is a basic javascript calculator and it works fine but i want to modify it so operations would always perform and update instead of me clicking the equals button. what i mean is when i do something like 2+2+2+2 it does not calculate until i press the equal button.






<pre> <div class="container"	>
<br>
<h1><font color="red" style= "font-size:70"> Ayoola's Calculator </font></h1>
<form name="calculator" >
  <input name = "display" placeholder="0" style= "width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px"/>
<br>
<input name = "answer" placeholder="0" style= "width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px"/>
  <br>
<input type="button" value= "7" name="seven"  onClick="document.calculator.display.value+='7'" style="width:60px; font-size:30; margin:3px"/>
<input type="button" value= "8" name="eight"  onClick="document.calculator.display.value+='8'" style="width:60px; font-size:30; "/>
<input type="button" value= "9" name="nine"   onClick="document.calculator.display.value+='9'" style="width:60px; font-size:30; "/>
<input type="button" value= "*" name="multiply" onClick="document.calculator.display.value+='*'" style="width:60px;  font-size:30; "/>
<br>
<input type="button" value= "4" name="four"  onClick="document.calculator.display.value+='4'" style="width:60px; font-size:30;  margin:3px"/>
<input type="button" value= "5" name="five"  onClick="document.calculator.display.value+='5'" style="width:60px; font-size:30; "/>
<input type="button" value= "6" name="six"   onClick="document.calculator.display.value+='6'" style="width:60px; font-size:30; "/>
<input type="button" value= "-" name="minus"  onClick="document.calculator.display.value+='-'" style="width:60px; font-size:30; "/>
<br>
<input type="button" value= "1" name="one"   onClick="document.calculator.display.value+='1'" style="width:60px; font-size:30;  margin:3px"/>
<input type="button" value= "2" name="two"   onClick="document.calculator.display.value+='2'" style="width:60px; font-size:30; "/>
<input type="button" value= "3" name="three" onClick="document.calculator.display.value+='3'" style="width:60px; font-size:30; "/>
<input type="button" value= "+" name="plus"  onClick="document.calculator.display.value+='+'" style="width:60px; font-size:30; "/>
<br>
<input type="button" value= "." name="point"  onClick="document.calculator.display.value+='.'" style="width:60px; font-size:30;  margin:3px"/>
<input type="button" value= "0" name="zero"   onClick="document.calculator.display.value+='0'" style="width:60px; font-size:30; "/>
<input type="button" value= "/" name="divide"  onClick="document.calculator.display.value +='/'" style="width:60px; font-size:30; "/>
<input type="button" value= "=" name="equal"  onClick="document.calculator.answer.value=eval(document.calculator.display.value)" style="width:60px;  font-size:30; "/>
<br>
<input type="reset" value= "C"   onClick= "clear" style="width:256px;  font-size:30; margin:3px "/>


</form>   
</div>


Что я уже пробовал:

я пробовал использовать funcyion, но ничего не вышло

2 Ответов

Рейтинг:
1

Karthik_Mahalingam

попробовать это

<form name="calculator">
            <input name="display" placeholder="0" style="width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px" />
            <br>
            <input name="answer" placeholder="0" style="width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px" />
            <br>
            <input type="button" value="7" name="seven"  style="width:60px; font-size:30; margin:3px" />
            <input type="button" value="8" name="eight"  style="width:60px; font-size:30; " />
            <input type="button" value="9" name="nine"  style="width:60px; font-size:30; " />
            <input type="button" value="*" name="multiply"  style="width:60px;  font-size:30; " />
            <br>
            <input type="button" value="4" name="four" style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="5" name="five"  style="width:60px; font-size:30; " />
            <input type="button" value="6" name="six"  style="width:60px; font-size:30; " />
            <input type="button" value="-" name="minus"  style="width:60px; font-size:30; " />
            <br>
            <input type="button" value="1" name="one"  style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="2" name="two"  style="width:60px; font-size:30; " />
            <input type="button" value="3" name="three"  style="width:60px; font-size:30; " />
            <input type="button" value="+" name="plus"  style="width:60px; font-size:30; " />
            <br>
            <input type="button" value="." name="point"  style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="0" name="zero"  style="width:60px; font-size:30; " />
            <input type="button" value="/" name="divide"  style="width:60px; font-size:30; " />
            <input type="button" value="=" name="equal" onclick="document.calculator.answer.value=eval(document.calculator.display.value)" style="width:60px;  font-size:30; " />
            <br>
            <input type="reset" value="C" onclick="clear" style="width:256px;  font-size:30; margin:3px " />
            <script>
                var buttons = document.querySelectorAll(".container input[type=button]");
                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].onclick = function () {
                        if (this.value != '=') {
                            document.calculator.display.value += '' + this.value;
                            document.calculator.answer.value = eval(document.calculator.display.value)
                        }
                     };
                }


                

            </script>
            </form>


ab_ayo

Вы не добавили функции onclick к значениям

Karthik_Mahalingam

<script>
                var buttons = document.querySelectorAll(".container input[type=button]");
                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].onclick = function () {
                        if (this.value != '=') {
                            document.calculator.display.value += '' + this.value;
                            document.calculator.answer.value = eval(document.calculator.display.value)
                        }
                     };
                }


                

            </script>

ab_ayo

я запустил код, который вы мне дали, но он ничего не делает

ab_ayo

По-прежнему ничего..

Karthik_Mahalingam

есть какие-нибудь ошибки?

Karthik_Mahalingam

скопируйте и вставьте приведенный ниже код в файл Блокнота, сохраните его как файл. html и откройте в браузере

<!doctype html>
<html lang="en">
<head> 
</head>
<body> 

    <div class="container">
        <br>
        
        <form name="calculator">
            <input name="display" placeholder="0" style="width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px" />
            <br>
            <input name="answer" placeholder="0" style="width:254px; height:60px; text-align:right; font-size:30; border-radius:8px; margin:3px" />
            <br>
            <input type="button" value="7" name="seven"  style="width:60px; font-size:30; margin:3px" />
            <input type="button" value="8" name="eight"  style="width:60px; font-size:30; " />
            <input type="button" value="9" name="nine"  style="width:60px; font-size:30; " />
            <input type="button" value="*" name="multiply"  style="width:60px;  font-size:30; " />
            <br>
            <input type="button" value="4" name="four" style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="5" name="five"  style="width:60px; font-size:30; " />
            <input type="button" value="6" name="six"  style="width:60px; font-size:30; " />
            <input type="button" value="-" name="minus"  style="width:60px; font-size:30; " />
            <br>
            <input type="button" value="1" name="one"  style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="2" name="two"  style="width:60px; font-size:30; " />
            <input type="button" value="3" name="three"  style="width:60px; font-size:30; " />
            <input type="button" value="+" name="plus"  style="width:60px; font-size:30; " />
            <br>
            <input type="button" value="." name="point"  style="width:60px; font-size:30;  margin:3px" />
            <input type="button" value="0" name="zero"  style="width:60px; font-size:30; " />
            <input type="button" value="/" name="divide"  style="width:60px; font-size:30; " />
            <input type="button" value="=" name="equal" onclick="document.calculator.answer.value=eval(document.calculator.display.value)" style="width:60px;  font-size:30; " />
            <br>
            <input type="reset" value="C" onclick="clear" style="width:256px;  font-size:30; margin:3px " />
            <script>
                var buttons = document.querySelectorAll(".container input[type=button]");
                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].onclick = function () {
                        if (this.value != '=') {
                            document.calculator.display.value += '' + this.value;
                            document.calculator.answer.value = eval(document.calculator.display.value)
                        }
                     };
                }


                

            </script>
            </form>
        </div>
</body>
</html>

ab_ayo

Спасибо, он работает как html-файл. но я хочу запустить его на коде visual studio

Karthik_Mahalingam

он должен работать, только код один и тот же..
возможно, вы что-то упустили в visual studio

ab_ayo

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

Karthik_Mahalingam

значит?
любой образец

ab_ayo

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

ab_ayo

допустим, мы вводим 2+4+6/2, ваш код даст нам результат 9. но если он вычисляется на основе последнего значения, он должен дать нам 6. Как работает обычный калькулятор

Karthik_Mahalingam

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

ab_ayo

как я могу разобрать это выражение?

Karthik_Mahalingam

ожидаемый вопрос..
предположим 6+4+3/2
возьмите последний символ из строки"/", затем разделите строку на основе этого и оцените первую часть, получите результат и оцените с помощью " / " и последнего значения....

ab_ayo

я не понимаю. Не могу ли я просто toatal каждой операции и сохранить в переменной, а затем начать операцию с общей суммой.

Karthik_Mahalingam

его трудно воспроизвести в Windows calculator...

Рейтинг:
0

F-ES Sitecore

Создайте такую функцию, как

function show(c) {
    document.calculator.display.value += c;
    document.calculator.answer.value=eval(document.calculator.display.value);
}


затем измените свои события onclick с

onClick="document.calculator.display.value+='7'"


к

onClick="show('7')"


ab_ayo

Сделать еще хуже. Значения больше не отображаются в текстовом поле