無法在div中顯示文本框結果

Question

我想在每次點擊“ =”時在“結果和輸入”按鈕下顯示所有結果表達式。 但是我一直在努力弄清楚。 到目前為止，這就是我所擁有的。 任何幫助將非常感激。 謝謝。

<!DOCTYPE html>
<html>
<body>
<head>
</head>
<script>


//Fucntion to bring operation to the operators
function calculation()
{
    var x = parseInt(document.getElementById("op1").value);
    var y = parseInt(document.getElementById("op2").value);
    var z = document.getElementById("operator").value;
    var result;

    if (z == "+"){
        result = x + y;
        document.getElementById("result").value = +result;
    }else if (z == "-"){
        result = x - y;
        document.getElementById("result").value = +result;
    }else if (z == "*"){
        result = x * y;
        document.getElementById("result").value = +result;
    }else if (z == "/"){
        result = x / y;
        document.getElementById("result").value = +result;
    }
    displayResults();
}

function displayResults()
{

    var dispArr = ["document.getElementById('op1').value", "document.getElementById('operator').value", "document.getElementById('op2').value",
    "=","document.getElementById('result').value"];

    dispArr.toString();
    document.getElementbyId("expressions").innerHTML = dispArr.join("");
}

//Function to display the operators
function displayOptr(i) {
    var optrArr =["+","-","*","/"];
    if (i==0){
        document.getElementById("operator").value = "+";
     } else if (i==1){
        document.getElementById("operator").value = "-";
     } else if (i==2){
        document.getElementById("operator").value = "*";
     } else if (i==3){
        document.getElementById("operator").value = "/";    
     }                
}

</script>

<div id="bodyDiv">
        <h1> CALCULATOR </h1>
        <hr/>
        <div class="leftDiv">
            <div id="colorblock">
                <div id = "add" class = "blocks" onClick = "displayOptr(0)">ADD</div>
                <div id = "subtract" class = "blocks" onClick = "displayOptr(1)">SUBTRACT</div>
                <div id = "multiply" class = "blocks" onClick = "displayOptr(2)">MULTIPLY</div>
                <div id = "divide" class = "blocks" onClick = "displayOptr(3)">DIVIDE</div>
            </div>
        </div>
        <div class="rightDiv">
            <div id = "calcblock">
                <input type ="text" size="3" id="op1"/>
                <input type = "text" size="1" id = "operator">
                <input type = "text" size="3"  id="op2"/>
                <input type = "button" value = "="  id="calculate" onClick = "calculation()"/>
                <input type = "text" size="6" id = "result" />
            </div>
        </div>
        <hr/>
        <div class="rightDiv">
            <div id = "pastcalcblock"> 
                <h3> PAST CALCULATIONS </h3> 
                <div id = "resultTab">
                    SORT<br>
                    <input type = "button" value = "As Entered" id = "enteredBut">
                    <input type = "button" value = "By Result" id = "resultBut"><br><br>
                    <div id = "expressions"></hr></div> 

                </div>
            </div>
        </div>
</body>
</html>

Answer 1

dispArr的值用引號dispArr來，因此將它們視為字符串。 刪除引號，然后在第39行（在dispArr.toString(); ）使用document.getElementbyId而不是document.getElementById dispArr.toString();

 <html> <body> <head> </head> <script> //Fucntion to bring operation to the operators function calculation() { var x = parseInt(document.getElementById("op1").value); var y = parseInt(document.getElementById("op2").value); var z = document.getElementById("operator").value; var result; if (z == "+"){ result = x + y; document.getElementById("result").value = +result; }else if (z == "-"){ result = x - y; document.getElementById("result").value = +result; }else if (z == "*"){ result = x * y; document.getElementById("result").value = +result; }else if (z == "/"){ result = x / y; document.getElementById("result").value = +result; } displayResults(); } function displayResults() { var dispArr = [document.getElementById('op1').value, document.getElementById('operator').value, document.getElementById('op2').value, "=",document.getElementById('result').value]; dispArr.toString(); document.getElementById("expressions").innerHTML = dispArr.join(""); } //Function to display the operators function displayOptr(i) { var optrArr =["+","-","*","/"]; if (i==0){ document.getElementById("operator").value = "+"; } else if (i==1){ document.getElementById("operator").value = "-"; } else if (i==2){ document.getElementById("operator").value = "*"; } else if (i==3){ document.getElementById("operator").value = "/"; } } </script> <div id="bodyDiv"> <h1> CALCULATOR </h1> <hr/> <div class="leftDiv"> <div id="colorblock"> <div id = "add" class = "blocks" onClick = "displayOptr(0)">ADD</div> <div id = "subtract" class = "blocks" onClick = "displayOptr(1)">SUBTRACT</div> <div id = "multiply" class = "blocks" onClick = "displayOptr(2)">MULTIPLY</div> <div id = "divide" class = "blocks" onClick = "displayOptr(3)">DIVIDE</div> </div> </div> <div class="rightDiv"> <div id = "calcblock"> <input type ="text" size="3" id="op1"/> <input type = "text" size="1" id = "operator"> <input type = "text" size="3" id="op2"/> <input type = "button" value = "=" id="calculate" onClick = "calculation()"/> <input type = "text" size="6" id = "result" /> </div> </div> <hr/> <div class="rightDiv"> <div id = "pastcalcblock"> <h3> PAST CALCULATIONS </h3> <div id = "resultTab"> SORT<br> <input type = "button" value = "As Entered" id = "enteredBut"> <input type = "button" value = "By Result" id = "resultBut"><br><br> <div id = "expressions"></hr></div> </div> </div> </div> </body> </html>

無法在div中顯示文本框結果

問題描述

1 個解決方案

解決方案1
0 已采納 2017-04-14 00:30:47

無法在div中顯示文本框結果

問題描述

1 個解決方案

解決方案1 0 已采納 2017-04-14 00:30:47

解決方案1
0 已采納 2017-04-14 00:30:47