函数更新后，HTML innerHtml不更新了

Question

我正在做面试练习题，遇到了一个innerHTML，它有一个预定义的HTML元素，有一个绑定参数，正在被传递。

var foo = false;
function define(x) {
    var foo = true;
 }
 define(true);
 document.getElementById('foo').innerHTML= "'foo' is equal to '" + foo + "'.";

 <span id="foo"></span>

我尝试了一些不同的方法，比如在javaScript中创建元素，尝试用'.textContent = "" +foo + ""来设置，让函数使用内部值return{ foo:true}与foo = define(true).foo;以及其他一些方法，尽管foo的值仍然是false。这里是怎么设置的？

Answer 1

Foo是false，因为函数中的内部foo变量不在你使用 "外部 "foo的块的范围内。

 var foo = false;
 function define(x) {
    var foo = true;
    return foo; // function should return a value
 }
 foo = define(true); // this will retrieve the value from the function
 document.getElementById('foo').innerHTML= "'foo' is equal to '" + foo + "'.";