单击按钮后将数值添加到表单框

时间:2019-04-08 00:14:21

标签: javascript jquery html

我正在为分配计算器编程,并且正在努力将每个按钮单击的值附加到显示框。例如,如果我单击按钮“ 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>

1 个答案:

答案 0 :(得分:0)

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