Javascript 无法在div中显示文本框结果_Javascript_Html_Css_Arrays

Javascript 无法在div中显示文本框结果

javascript html css arrays

Javascript 无法在div中显示文本框结果,javascript,html,css,arrays,Javascript,Html,Css,Arrays,我想在每次点击“=”时显示“结果”和“输入”按钮下的所有结果表达式。但我一直在努力想办法。这就是我目前所拥有的。任何帮助都将不胜感激。多谢各位 <!DOCTYPE html> <html> <body> <head> </head> <script> //Fucntion to bring operation to the operators function calculation() { var x = pa

我想在每次点击“=”时显示“结果”和“输入”按钮下的所有结果表达式。但我一直在努力想办法。这就是我目前所拥有的。任何帮助都将不胜感激。多谢各位

<!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>


//向操作员提供操作的功能
函数计算（）
{
var x=parseInt（document.getElementById（“op1”）.value）；
var y=parseInt（document.getElementById（“op2”）.value）；
var z=document.getElementById（“运算符”）.value；
var结果；
如果（z==“+”）{
结果=x+y；
document.getElementById（“结果”）.value=+result；
}如果（z==“-”），则为else{
结果=x-y；
document.getElementById（“结果”）.value=+result；
}如果（z==“*”），则为else{
结果=x*y；
document.getElementById（“结果”）.value=+result；
}如果（z==“/”），则为else{
结果=x/y；
document.getElementById（“结果”）.value=+result；
}
显示结果（）；
}
函数displayResults（）
{
var dispArr=[“document.getElementById（'op1'）.value”，“document.getElementById（'operator'）.value”，“document.getElementById（'op2'）.value”，
“=”，“document.getElementById（'result'）.value”]；
dispArr.toString（）；
document.getElementbyId（“表达式”）.innerHTML=dispArr.join（“”）；
}
//函数来显示运算符
功能显示OPTR（i）{
var optrArr=[“+”、“-”、“*”、“/”]；
如果（i==0）{
document.getElementById（“运算符”）.value=“+”；
}else如果（i==1）{
document.getElementById（“运算符”）.value=“-”；
}else如果（i==2）{
document.getElementById（“运算符”）.value=“*”；
}else如果（i==3）{
document.getElementById（“运算符”）.value=“/”；
}                
}
计算器

添加
减去
倍增
分

过去的计算
排序





dispArr的值在引号中，因此它们被视为字符串。删除引号，然后使用document.getElementbyId
而不是第39行的document.getElementbyId
（在dispArr.toString（）下；
）


//向操作员提供操作的功能
函数计算（）
{
var x=parseInt（document.getElementById（“op1”）.value）；
var y=parseInt（document.getElementById（“op2”）.value）；
var z=document.getElementById（“运算符”）.value；
var结果；
如果（z==“+”）{
结果=x+y；
document.getElementById（“结果”）.value=+result；
}如果（z==“-”），则为else{
结果=x-y；
document.getElementById（“结果”）.value=+result；
}如果（z==“*”），则为else{
结果=x*y；
document.getElementById（“结果”）.value=+result；
}如果（z==“/”），则为else{
结果=x/y；
document.getElementById（“结果”）.value=+result；
}
显示结果（）；
}
函数displayResults（）
{
var dispArr=[document.getElementById（'op1'）。值，document.getElementById（'operator'）。值，document.getElementById（'op2'）。值，
“=”，document.getElementById（'result'）.value]；
dispArr.toString（）；
document.getElementById（“表达式”）.innerHTML=dispArr.join（“”）；
}
//函数来显示运算符
功能显示OPTR（i）{
var optrArr=[“+”、“-”、“*”、“/”]；
如果（i==0）{
document.getElementById（“运算符”）.value=“+”；
}else如果（i==1）{
document.getElementById（“运算符”）.value=“-”；
}else如果（i==2）{
document.getElementById（“运算符”）.value=“*”；
}else如果（i==3）{
document.getElementById（“运算符”）.value=“/”；
}                
}
计算器

添加
减去
倍增
分

过去的计算
排序





dispArr.tostring（）的目的是什么？你没有把它分配给任何东西。