Javascript 控制 html，因此外部 js 看不到 html 名称字段

Javascript controls html so the external js does not see the html name field

本文关键字：html 看不到 js 字段 控制 Javascript 外部      更新时间：2023-09-26

我正在使用js+html构建一个表单，但我遇到了一个问题。我的表单中有一部分，用户应该能够单击文本字段并从日历（随时.js通过MAM3）中选择日期和时间，并且由于我的表单（部分代码）是这样构建的：

third_list = "<table class='table'>";
if (radio_array[genIndex] == reserve) {
    third_list += "<tr><td id='Date:'><label><span id='Date'>Date:</span><input type='text' id='Date' name='_date' size='20' onfocus='showMessage()'/></label></td>";
    third_list += "<td id='Time:'><label><span id='Time'>Time:</span><input type='text' id='Time' name='_time' size='20' /></label></td>";
    document.getElementById("third").innerHTML = third_list;
    l3_value = "";
    return;
}

并把它放到 HTML 中：

    <script type="text/javascript">
    AnyTime.widget
        ( "Date",
            { format: "%m/%d/%Z" }
        );
    AnyTime.widget
        ( "Time",
            { format: "%h:%i:%p" }
        );
    </script>

它不会弹出日历。

旁注：我已经包含了所有必需的js&css文件，并试图看看它是否适用于js的单独文本字段，并且它有效。我认为它不起作用的原因是它是由 js 控制的，所以 Anytime.js 不会将其视为 html 名称字段。

SN2：onfocus='showMessage（）' 在我的 js 中是在用户单击文本字段时显示一条消息。

我如何让它工作？

几个问题：

首先，您有多个元素具有id值 Date 和 Time 。 id值在文档中必须是唯一的。我希望脚本没有获得它期望的元素并且无法初始化。AnyTime 的文档似乎建议它使用您AnyTime.widget的第一个参数作为id，并期望获得输入字段。在您的情况下，它通常不会在大多数浏览器上，因为当面对具有重复id的无效结构时，大多数浏览器会在您请求带有该id的"the"元素时返回第一个，在您的情况下，这是一个span而不是输入字段。

您的Date要素：

<span id='Date'>Date:</span><input type='text' id='Date' ... />
<!--      ^--- one                                 ^--- two -->

Time是同样的问题。

除此之外，我怀疑您需要确保在调用AnyTime.widget时元素存在。我不知道你在哪里有那个script标签来调用它，但你需要做的是在你执行完行后进行这个调用。

document.getElementById("third").innerHTML = third_list;

。以便有问题的元素存在于 DOM 中。例如：

third_list = "<table class='table'>";
if (radio_array[genIndex] == reserve) {
    third_list += "<tr><td id='Date:'><label><span id='Date'>Date:</span><input type='text' id='Date' name='_date' size='20' onfocus='showMessage()'/></label></td>";
    third_list += "<td id='Time:'><label><span id='Time'>Time:</span><input type='text' id='Time' name='_time' size='20' /></label></td>";
    document.getElementById("third").innerHTML = third_list;
    l3_value = "";
    setUpWidgets();
    return;
}
// ...elsewhere in the same scope or a containing scope:
function setUpWidgets() {
    AnyTime.widget
        ( "Date",
            { format: "%m/%d/%Z" }
        );
    AnyTime.widget
        ( "Time",
            { format: "%h:%i:%p" }
        );
}

这将创建一个函数，当元素存在时调用该函数。

旁注：您还有一个如下所示的id：

 <td id='Date:'>

虽然这在HTML5中是一个有效的id，但它在HTML4中无效，在CSS中也无效。因此，如果您尝试在CSS样式的选择器中使用该id（例如，使用jQuery），则可能会遇到麻烦。

相关文章：