JavaScript代码未运行

JavaScript code not running

本文关键字：运行 代码 JavaScript      更新时间：2023-09-26

我有以下代码：

...<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>

它从我的下拉列表中选择了一个选项，问题是，如果我删除警报（"），它会因为某种原因停止工作，有什么想法吗？

在尝试使用document.getElementById之前，您需要等待文档加载。警报的速度慢到足以在警报框后面加载元素。如果没有警报，当运行以下行时，"selected_city"很可能没有元素。

有关等待加载页面的更多信息，请查看此StackOverflow问题。

编辑

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

不幸的是，这种"等待它"的保证不适用于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这样的框架是前端开发人员的黄金，它有一个现成的函数，可以接受和回调任何数量的函数。这里是另一个StackOverflow问题，专门询问有关使用onload的问题。

最后，这一行：

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

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

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

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

相关文章：