Question

我正在调用一个打印到div的函数，然后返回一个也打印到div的字符串。以下只会打印“两个”，但我希望它打印“一个”然后打印“两个”：

<body>
     <div id="view"></div>
</body>
<script>
global_cdiv = "view"
function test1(){
    document.getElementById(global_cdiv).innerHTML += "one" + "<br>";
    return "two";
}
document.getElementById(global_cdiv).innerHTML += test1();

</script>

调试中没有出现任何错误或任何内容。为什么Javascript会忽略函数内部的innerHTML？（解决方法是将test1（）中的值存储到变量然后打印它，但为什么不能直接使用test1？）

Answer 1

document.getElementById(global_cdiv).innerHTML += test1();

是

的简短形式

document.getElementById(global_cdiv).innerHTML = document.getElementById(global_cdiv).innerHTML + test1();

在评估test1()之前，评估的innerHTML值是空的，并且与test1() two的结果连在一起。所以，实际表达式就像这样

document.getElementById(global_cdiv).innerHTML = "" + "two";

这会覆盖test1()内的任何内容。这就是为什么你只看到two。

要了解它确实会覆盖它，请更改test1()这样的

function test1(){
    document.getElementById(global_cdiv).innerHTML += "one" + "<br>";
    console.log(document.getElementById(global_cdiv).innerHTML);
    return "two";
}

它会打印one<br>

Answer 2

当你致电document.getElementById(global_cdiv).innerHTML += test1()时，这是执行的顺序：
1-评估document.getElementById(global_cdiv).innerHTML并将其保存为临时变量
2-执行test1功能
3-将临时变量附加到test1函数的返回值 4-将结果分配给document.getElementById(global_cdiv).innerHTML

所以这大致是你正在做的事情：

var temp = document.getElementById(global_cdiv).innerHTML
document.getElementById(global_cdiv).innerHTML = "one"  // inside your function
document.getElementById(global_cdiv).innerHTML = temp + "two"

第二个innerHTML（在你的情况下在你的函数里面）分配被第三个覆盖（不附加到“两个”）

Answer 3

<body>
     <div id="view"></div>
</body>
<script>
global_cdiv = "view";
    var temp = ""; 
function test1(){
   temp = "one" + "<br>";
    return temp + "two";
}
document.getElementById(global_cdiv).innerHTML = test1();

</script>

查看上面的代码。这将解决您的问题。

为什么在将值返回到innerHTML时，函数内的innerHTML会被忽略？

3 个答案: