Javascript 如何使用innerHTML显示多个输出？

我在脚本中有这个函数

function arith()
{
    var n1 = parseInt(document.getElementById('num1').value, 10);
    var n2 = parseInt(document.getElementById('num2').value, 10);
    var newVal;
    if(op == "Operation 1")
    {
        newVal1 = n1 + n2;
    }
    else if(op == "Operation 2")
    {
        newVal2 = n1 - n2;
    }
    else if(op == "Operation 3")
    {
        newVal3 = n1 * n2;
    }
    else if(op == "Operation 4")
    {
        newVal4 = n1 / n2;
    }

    var demoP = document.getElementById("demo");
    {
        demoP.innerHTML = "Operation 1=" + newVal1;
        demoP.innerHTML = "Operation 2=" + newVal2;
        demoP.innerHTML = "Operation 3=" + newVal3;
        demoP.innerHTML = "Operation 4=" + newVal4;
    }

    return false;
}

当我调用这些innerHTML时，我可以使用

---

足够了吗，或者我需要调用每个元素？

调用

innerHtml

将覆盖每次调用的内容。在分配给

innerHTML

属性之前，在

字符串中构建HTML

var demoP = document.getElementById("demo");
{
                    var html = "";
                    html += "Operation 1=" + newVal1 + "<br/>";
                    html += "Operation 2=" + newVal2 + "<br/>";
                    html += "Operation 3=" + newVal3 + "<br/>";
                    html += "Operation 4=" + newVal4 + "<br/>";
                    demoP.innerHTML = html;
}

var demo=document.getElementById（“demo”）；
{
var html=“”；
html+=“操作1=“+newVal1+”
；
html+=“操作2=“+newVal2+”
”；
html+=“操作3=“+newVal3+”
；
html+=“操作4=“+newVal4+”
”；
deop.innerHTML=html；
}

JS Fiddle:
调用
innerHtml
将覆盖每次调用的内容。在分配给
innerHTML
属性之前，在
字符串中构建HTML

var demoP = document.getElementById("demo");
{
                    var html = "";
                    html += "Operation 1=" + newVal1 + "<br/>";
                    html += "Operation 2=" + newVal2 + "<br/>";
                    html += "Operation 3=" + newVal3 + "<br/>";
                    html += "Operation 4=" + newVal4 + "<br/>";
                    demoP.innerHTML = html;
}

var demo=document.getElementById（“demo”）；
{
var html=“”；
html+=“操作1=“+newVal1+”
；
html+=“操作2=“+newVal2+”
”；
html+=“操作3=“+newVal3+”
；
html+=“操作4=“+newVal4+”
”；
deop.innerHTML=html；
}

JS Fiddle:
当前代码首先将元素的
.innerHTML
设置为
“Operation 1=“+newVal1
，然后用其他值覆盖它三次。也许您打算将所有结果连接在一起，并将结果放在该元素中：

demoP.innerHTML = "Operation 1=" + newVal1 + "<br>"
                + "Operation 2=" + newVal2 + "<br>"
                + "Operation 3=" + newVal3 + "<br>"
                + "Operation 4=" + newVal4;

deop.innerHTML=“操作1=“+newVal1+”
”
+“操作2=“+newVal2+”
”
+“操作3=“+newVal3+”
”
+“操作4=“+newVal4；
当前代码首先将元素的
.innerHTML
设置为
“操作1=“+newVal1
，然后用其他值覆盖它三次。也许您打算将所有结果连接在一起，并将结果放在该元素中：

demoP.innerHTML = "Operation 1=" + newVal1 + "<br>"
                + "Operation 2=" + newVal2 + "<br>"
                + "Operation 3=" + newVal3 + "<br>"
                + "Operation 4=" + newVal4;

deop.innerHTML=“操作1=“+newVal1+”
”
+“操作2=“+newVal2+”
”
+“操作3=“+newVal3+”
”
+“操作4=“+newVal4；
您应该使用
+=
而不是
=
，否则它将覆盖您的数据

demoP.innerHTML += "Operation 2=" + newVal2;

调用一次就足够了。
您应该使用
+=
而不是
=
，否则它会重写您的数据

demoP.innerHTML += "Operation 2=" + newVal2;

调用一次就足够了。
最好的方法是在最后一刻连接字符串并添加到DOM（节省时间）

而且，demo后的括号是不必要的
最好的方法是在最后一刻将字符串合并并添加到DOM中（节省时间）

此外，演示后的括号是不必要的
只需一行即可：

demoP.innerHTML = "Operation 1=" + newVal1 + "<br>"+ "Operation 2=" + newVal2 + "<br>"+ "Operation 3=" + newVal3 + "<br>"+"Operation 4=" + newVal4;

deop.innerHTML=“操作1=“+newVal1+”
“+”操作2=“+newVal2+”
“+”操作3=“+newVal3+”
“+”操作4=“+newVal4；
您只需一行：

demoP.innerHTML = "Operation 1=" + newVal1 + "<br>"+ "Operation 2=" + newVal2 + "<br>"+ "Operation 3=" + newVal3 + "<br>"+"Operation 4=" + newVal4;

deop.innerHTML=“操作1=“+newVal1+”
“+”操作2=“+newVal2+”
“+”操作3=“+newVal3+”
“+”操作4=“+newVal4；
注意，四个
newValX
变量中只有一个在该函数中被赋值（因为if/else if结构）。它们是全局变量吗？如果它们没有在某个地方声明，当您尝试使用尚未赋值的变量时，将出现引用错误。请注意，在该函数中，四个
newValX
变量中只有一个将被赋值（因为If/else If结构）。它们是全局变量吗？如果它们没有在某个地方声明，那么当您尝试使用尚未赋值的引用时，将出现引用错误。