JS的执行顺序

分手后的思念是犯贱 2022-07-27 14:53 178阅读 0赞

对于js新手（比如我）来说，很多时候对这门语言的理解并不透彻，所以在写程序的时候会出现各种各样奇怪的问题，今天我就遇到了一个我以为是‘作用域’的问题。  
先看我刚开始的代码

<label>请输入北京今天空气质量：<input id="aqi-input" type="text" value="ff"></label>
      <button id="button">确认填写</button>
    
      <div>您输入的值是：<span id="aqi-display">尚无录入</span></div>
    
    <script type="text/javascript"> (function() { var inputText=document.getElementById('aqi-input').value; var button=document.getElementById('button'); button.onclick=function(){ var showText= document.getElementById('aqi-display').innerHTML; if(inputText==''){ showText='尚未赋值'; } else{ showText=inputText; } }; })(); </script>

我想实现的功能是当用户在文本框中输入内容后，点击按钮，‘您输入的值是’后面（span标签）会变成用户刚输入的内容。  
细心的你一定可以发现我的代码存在两个问题  
**问题一：不论输入什么span标签的内容始终是‘尚未赋值’**  
由于对js的基础理解不深入，我刚开始并没有发现这个问题，找了半天没有找到，只好打断点。发现showText的值确实变成了‘ff’(input的初始值），但也就只是showText值改变了而已，span标签的内容并没有丝毫改变。  
我突然醒悟：`showText`作为一个变量获取的是span标签的`innerHTML`，在获取完之后就和span标签的innerHTML不再有关系。以我的理解是变量`shouText`只是从`document.getElementById('aqi-display').innerHTML`里获取一次值，而`shouText`的改变并不会影响`document.getElementById('aqi-display').innerHTML`。  
**问题二：inputText的值始终是’ff’**  
在改正了问题一之后，现在代码变成这样

我刚开始在html的input中没有添加value属性时以为是作用域问题，函数内取不到inputText的值，所以一直为空，但添加了value属性后发现就一直是ff,此时已经排除取不到外部变量的问题可能性（作用域链）。好吧，接着断点，断点真的是好东西。猛然发现 `var inputText=document.getElementById('aqi-input').value;`就只是在函数加载时执行一次，在点击之后并不会再次执行取值，所以就值就一直是初始的value值。找到问题，改正后的所有代码如下