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>

它从我拥有的下拉列表中选择一个选项，问题是，如果我删除 alert("") 它会由于某种原因停止工作，有什么想法吗？

Answer 1

您需要等待文档加载后才能尝试使用document.getElementById。警报使事情变慢，以至于在警报框后面，元素被加载。如果没有警报，当运行以下行时，“selected_city”可能会有 no 元素。

查看this StackOverflow question，了解有关等待页面加载的更多信息。

编辑

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

不幸的是，这种“等待它”的保证不适用于 Javascript（因为 JS 本身可以改变页面加载的方式）。因此，简单地将 script 标签移动到文档的末尾，与等待 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 本身可能为 null 或未定义，因为在您请求其值时未加载 #jform_city。这反过来会导致 document.getElementById(selected_city) 失败，即使该元素在您尝试选择它时已加载。

异步是 Javascript 的一大痛点。

任何时候您需要从页面本身获取信息，根据经验，您必须等待 DOM 加载。实际上，这意味着您的几乎所有代码（除了不需要加载页面的代码）都应该在页面加载后调用的函数中。