Javascript контролирует HTML, поэтому внешний JS не видит поле имени HTML

Question

Я строю форму, используя js+html, и я столкнулся с проблемой. В моей форме есть часть, где пользователь должен иметь возможность щелкнуть текстовое поле и выбрать дату и время из календаря (anytime.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, чтобы показать сообщение, когда пользователь нажимает на текстовое поле.

Как мне заставить это работать?

Answer 1

Пара вопросов:

Во-первых, у вас есть более одного элемента с id ценности Date а также Time, id значения должны быть уникальными в документе. Я ожидаю, что скрипт не получает ожидаемый элемент и не может его инициализировать. Документация для AnyTime, кажется, предполагает, что он использует первый аргумент, который вы даете AnyTime.widget как id и ожидает получить поле ввода. В вашем случае это обычно не происходит в большинстве браузеров, потому что когда сталкиваешься с недопустимой структурой с дублированием id s, большинство браузеров вернет первый, когда вы запросите элемент "the" с этим id, который в вашем случае является 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:'>

Хотя это действительно id в HTML5 это недопустимо в HTML4 и недопустимо в CSS. Так что, если вы попытаетесь использовать это id в селекторе в стиле CSS (например, с jQuery) вы, вероятно, столкнетесь с проблемами.