从外部 JavaScript 文件访问表单元素

Accessing form elements from external javascript file

本文关键字：表单 元素 访问表 访问 JavaScript 文件 从外部      更新时间：2023-09-26

这似乎是一件简单的事情，我真的很想多了解一下。这是我的问题。

我有一个选择，其中包含几个不同的选项。我需要一个变量来保存选择的选项，以便我可以从那里根据选择的内容做不同的事情。

这是我的网页：

    <!DOCTYPE html>
    <html>
    <head>
        <title>Test</title>
        <script src="script.js" type="text/javascript"></script>
    </head>
    <body>
    <form method="get">
        <table>
            <tr>
                <p>
                    Please choose your class:
                </p>
            </tr>
            <tr>
                <td>
                    <select name= "classSelect" id="classSelect" size = "3">
                        <option value = "CS211" selected = "selected">CS-211</option>
                        <option value = "CS111">CS-111</option>
                        <option value = "CS275">CS-275</option>
                    </select>
                </td>
            </tr>
        </form
    </body>
</html>

然后在我的javascript文件中，我只想声明一个全局变量：

var currentSelection = document.forms[0].classSelect.selectedIndex;

现在当前选择始终为空，我不确定为什么。

当您设置变量时，DOM 尚未呈现。等待 DOM 触发其就绪事件，或者将脚本设置为在文档加载后运行。这是一个解决方案：

window.onload = function() {
  // run this code on load
};

请注意，这将覆盖之前的加载函数。如果你有可用的jQuery，你应该这样做以避免任何覆盖：

$(window).load(function() {});

这些变体也有效：

$(function() {});
$(document).ready(function() {});
相关文章：