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值必須在文檔中是唯一的。我希望腳本沒有獲得它期望的元素，並且無法初始化。 documentation for 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:'> 

雖然這是一個valid id in HTML5，它wasn't valid in HTML4和isn't valid in CSS。因此，如果您嘗試在CSS樣式選擇器中使用id（例如，使用jQuery），您可能會遇到麻煩。