2

我正在调用一个打印到 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 呢？）

4

3 回答 3

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

是一个简短的形式

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

在评估值之前，先评估空值，然后将其与 is 的结果test1()连接起来。所以，实际的表达就变成了这样innerHTMLtest1()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>

于 2013-10-26T09:09:36.963 回答
1

当你调用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（在您的情况下位于您的函数内部）分配被第三个（未附加到“两个”）覆盖

于 2013-10-26T09:14:44.013 回答
0 
<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>

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

于 2013-10-26T09:36:06.987 回答