JavaScript代码没有运行

Question

我有以下代码：

...<some code>... 
...<elements load>... 

<script type="text/javascript"> 

    var selected_city = document.getElementById('jform_city').value; 
    var selected_province=document.getElementById('jform_province').value; 

    <!-- set the onchange property for all options in provice to activate getCities() --> 
    document.getElementById('jform_province').onchange = function() { 
     getCities(); 
    } 

    if(selected_province != ''){ 
     getCities(); 
    } 
</script> 

...<more elements load>.... 

<script type="text/javascript"> 
    alert("TEST"); 
    document.getElementById(selected_city).selected="1"; 
    </script> 

它选择从下拉列表中我有一个选择，问题是，如果我删除警报（“”）它停止工作出于某种原因，有什么想法？

Answer 1

在尝试使用document.getElementById之前，您需要等待文档加载。警报正在放慢速度，在警告框后面，元素被加载。如果没有提示，下面一行运行时，可能会出现no元素的“selected_city”。

有关等待页面加载的更多信息，请参阅this StackOverflow question。

编辑

首先，当Web浏览器解析的页面是，它转换接收到一个DOM中的HTML元素会发生什么 - 文档对象模型，这是页的内存中表示。只有在元素处于DOM中后才有可能对其进行操作，并且这些元素不一定会按照它们出现在HTML中的顺序进入DOM：现代快速浏览器非常异步地运行，只能保证页面将最终看起来好像整个事情被同步加载。这很容易验证：几乎每个浏览器都会加载文本，甚至会在显示图片时显示它。只有在获取图像之后，才会将其插入显示屏，如果必要的话，推动/重新排列文本。最终结果是相同的，但页面似乎以这种方式更快加载。

不幸的是，这个“等待”保证不适用于Javascript（因为JS本身被允许改变页面加载的方式）。因此，简单地将脚本标记移动到文档的末尾与等待DOM包含该元素是不一样的。

您必须实际等待浏览器回电给您，并告诉您DOM已经加载 - 这是真正知道您可以操纵DOM的唯一方法。这是window.onload用于此回调。我能想到的一对夫妇，这是不是为你工作的原因：

如果你实际上只是插入逐字window.onload = function();，你忽略了一点 - 这意味着不会是空的功能，但你功能。我会假设你不只是那种类型，但为了以防万一，你的代码应该是

window.onload = function(){ 
    document.getElementById(selected_city).selected="1"; 
}; 

另外，由于window.onload=[some function]被分配功能稍后到一个单变量调用，可以有只有一个。如果您正在加载一些也分配window.onload其他脚本，您的回调可能会丢失。

这就是为什么像jQuery这样的框架，它有一个ready函数，可以接受和回调任何数量的函数，都是前端开发者的黄金。 Here is another StackOverflow question专门询问有关使用onload。

最后，这条线：

var selected_city = document.getElementById('jform_city').value; 

也需要DOM其正常运行之前加载。 selected_city本身可能为空或未定义，因为#jform_city在您询问其值时未加载。这反过来会导致document.getElementById(selected_city)失败，即使该元素在您尝试选择它时加载。

异步性是在Javascript中一个真正的痛苦。

你需要从网页本身的信息，作为一个经验法则任何时候，你必须等待DOM加载。在实践中，这意味着几乎所有的代码（除了它不会对任何需要的页面加载）应在加载页面之后被调用函数。