Добавление числовых значений в поле формы при нажатии кнопки

Я программирую калькулятор для задания, и я изо всех сил пытаюсь добавить значения каждого нажатия кнопки в свое окно отображения. Например, если я нажму кнопку «4», а затем «5», я хочу, чтобы на дисплее отображалось «45» и т. д., чтобы оценить, что находится в поле дисплея. Когда я нажимаю кнопку на калькуляторе, число отображается правильно, но после этого не добавляются параллельные значения. Я также создал функцию equal, чтобы она правильно функционировала, если дисплей набирается на клавиатуре.

<!DOCTYPE html>
<head>
    <link href = "project4.css" rel = "stylesheet">
    <title>Calculator</title>
    </head>

    <body>

        <div id = "calculator">

            <h3>Calculator</h3>
            <input type = "text" id = "display" onClick= "append()"><br />
            <input type = "button" value = "mrc" class = "memory">
            <input type = "button" value = "m+" class = "memory">
            <input type = "button" value = "m-" class = "memory">
            <input type = "button" value = "/" class = "operator" onClick= "setDivide()"><br />
            <input type = "button" value = "7" class = "number" onClick= "setSeven()">
            <input type = "button" value = "8" class = "number" onClick= "setEight()">
            <input type = "button" value = "9" class = "number" onClick= "setNine()">
            <input type = "button" value = "*" class = "operator" onClick= "setMultiply()"><br />
            <input type = "button" value = "4" class = "number" onClick= "setFour()">
            <input type = "button" value = "5" class = "number" onClick= "setFive()">
            <input type = "button" value = "6" class = "number" onClick= "setSix()">
            <input type = "button" value = "+" class = "operator" onClick = "setAdd()"><br />
            <input type = "button" value = "1" class = "number" onClick= "setOne()">
            <input type = "button" value = "2" class = "number" onClick= "setTwo()">
            <input type = "button" value = "3" class = "number" onClick= "setThree()">
            <input type = "button" value = "-" class = "operator" onClick= "setSubtract()"><br />
            <input type = "button" value = "0" class = "number" onClick= "setZero()">
            <input type = "button" value = "." value = "." class = "number" onClick= "setDecimal()">
            <input type = "button" value = "C" class = "clear" onClick= "setClear()">
            <input type = "button" value = " = " class = "equal" onClick= "setEquals()">

        </div>

        <!--Jquery script-->
    <script type = "text/javascript" src = "jquery-3.3.1.js"></script>

        <!--Javascript script-->
    <script type = "text/javascript" src = "project4.js">

//Declaring all 
variables necessary
var seven, eight, nine, four, five, six, one, two, three, zero, decimal, 
divide, multiply, add, subtract, clear, answer, expression;

//All functions to set the keys to values upon clicking
function setSeven() {
    seven = 7;
    document.getElementById("display").value = seven;
}

function setEight() {
    eight = 8;
    document.getElementById("display").value = eight;
}

function setNine() {
    nine = 9;
    document.getElementById("display").value = nine;
}

function setFour() {
    four = 4;
    document.getElementById("display").value = four;
}

function setFive() {
    five = 5;
    document.getElementById("display").value = five;
}

function setSix() {
    six = 6;
    document.getElementById("display").value = six;
}

function setOne() {
    one = 1;
    document.getElementById("display").value = one;
}

function setTwo() {
    two = 2;
    document.getElementById("display").value = two;
}

function setThree() {
    three = 3;
    document.getElementById("display").value = three;
}

function setZero() {
    zero = 0;
    document.getElementById("display").value = zero;
}

function setDecimal() {
    decimal = ".";
    document.getElementById("display").value = decimal;
}

function setDivide() {
    divide = "/";
    document.getElementById("display").value = divide;
}

function setMultiply() {
    multiply = "*";
    document.getElementById("display").value = multiply;
}

function setAdd() {
    add = "+";
    document.getElementById("display").value = add;
}

function setSubtract() {
    subtract = "-";
    document.getElementById("display").value = subtract;
}

function setClear() {
    clear = "";
    document.getElementById("display").value = clear;
}

function setEquals() {
    expression = (document.getElementById("display").value);
    answer = eval(expression);
    document.getElementById("display").value = answer;
}

function append() {
    var array = new Array(document.getElementById("display").value);
    var newDisplay = array.append("display", 
    document.getElementById("display").value);
    document.getElementById("display").value = newDisplay;
}
           </script>

    </body>

push не append.

— 08.04.2019 02:19

Вы перезаписываете существующее значение <input> каждый раз. Используйте .value += вместо .value =, кроме вашего сброса

— 08.04.2019 02:21

.value +=, похоже, сработало! Спасибо.

— 08.04.2019 03:33

javascript jquery html

08.04.2019 02:14

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

document.getElementById("display").value+ = answer;

08.04.2019 09:15

Другие вопросы по теме

Предотвращение двойного запуска метода JavaScript до завершения его выполнения

Как добавить промежутки между изображениями в слайдере карусели или убрать сбой при слайде

Установить курсор в конце подстроки в контентируемом div

Функция jquery .animate scrollTop не работает

Модальное окно в Angular 6, открытое плагином jQuery, закрывается только после двух кликов

Как плавно прокручивать два элемента одновременно с помощью scrollIntoView()?

Почему переключатель jquery работает в предварительном просмотре настройщика, но не работает в wordpress/woocommerce

Мой ajax submit onchange select работает только с первой строкой

Как я могу фильтровать и отображать данные JSON на основе ввода пользователя?

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

Добавление числовых значений в поле формы при нажатии кнопки

Ответы 1

Другие вопросы по теме

Похожие вопросы