javascript - 为什么添加 Javascript Alert 会改变此代码的行为

Question

我正在使用 AJAX 从数据库填充名为“持续时间”的选择框。用户可以选择持续时间并提交表格。然后，数据库的结果会列在同一页面上。然后，我使用此 PHP/Javascript 代码将选择框设置回用户的选择。

echo "<script>alert(); document.getElementById('duration').value = '" . $xDuravar . "';</script>";

出于某种原因，只有当我使用 Alert() 时，正确的选择才会显示在选择框中。否则，选择框将恢复为其默认值。为什么会出现这种情况？任何帮助将不胜感激。提前致谢。

Answer 1

当你的 JS 代码执行时，文档还没有加载，它找不到 #duration 元素。

添加警报时它起作用的原因是，JavaScript 执行会停止，直到您关闭它，然后加载文档。

解决这个问题的“正常”方法是等待文档加载:

echo "<script>
        window.addEventListener('DOMContentLoaded', function(){
            document.getElementById('duration').value = '" . $xDuravar . "';
        }, false);
      </script>";

附注

如果您使用DOMContentLoaded，它只会等待 DOM(基本上是 HTML)加载(足以满足您发布的代码)。但是，如果您按照 Siguza 评论中的建议使用 load，它也会等待加载任何图像、CSS、JS 文件。因此，您可以根据需要使用其中之一。如果您不知道应该选择哪一个，只需使用 load。