Javascript контролирует html, поэтому внешние js не видят поле имени html

Question

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

Как это сделать?

Answer 1

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

Во-первых, у Вас есть больше чем один элемент с id значениями Date и Time. id значения must быть уникальным в документе. Я ожидаю, что скрипт не получит ожидаемый элемент и не сможет инициализировать. Предполагается, что documentation for AnyTime использует первый аргумент, который вы даете AnyTime.widget как id и ожидает получить поле ввода. В вашем случае это обычно не будет в большинстве браузеров, потому что, столкнувшись с недопустимой структурой с дубликатом id, большинство браузеров вернут первый, когда вы попросите элемент «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" } 
     ); 
} 

Это создает функцию, которую вы вызываете, когда элементы присутствуют.

---

Side Примечание: У вас также есть id, который выглядит следующим образом:

<td id='Date:'> 

Хотя это valid id in HTML5, это wasn't valid in HTML4 и isn't valid in CSS. Поэтому, если вы попытаетесь использовать этот id в селекторе стиля CSS (например, с jQuery), вы, вероятно, столкнетесь с проблемами.