Dynamic HTML (II)

Dynamic HTML (II)

---

範例：我們定義了三個訊息，而這些訊息存放在陣列中；只要使用者在 "Click to change" 的按鈕上按一下，這些訊息就會順序的顯示出來。

---

原始碼：

<script language="javascript">
<!--
  var count = 0;
  var msg = new Array(3);
  msg[0] = 'XML Rules';
  msg[1] = 'XML 加油';
  msg[2] = '學習 XML 超簡單';

  function change() {
    count++;
    count = count % 3;
    document.myform.elements[0].value=msg[count];
  }
// -->
</script>

---

說明：許多有用的 DHTML 網頁都跟 form 元件的使用有關，在這個範例中，我們 說明 Javascript 如何與 form 元件互動。

• 範例中，呈現的是一個 form 元件，該元件的原始碼如下：

  <form name="myform">
  <input type="text" value="XML Rules">
  <input type="button" onClick="change();" value="Click to change"/>
  </form>
  

  有幾個地方請特別注意一下：第一個是 form 元件的名稱被命名為 myform； 第二個是 button 元件中，我們定義了一個 onClick 事件；若該事件被觸發，則 瀏覽器執行 change() 函數。
• 之前提到的 JavaScript Hierarchy 說明了物件的架構，例如 form 裡面的第一個 element，可以以 elements[0] 來代表，同樣的，一個網頁裡的第一個 img 元素，也可以以 document.images[0] 來代表。只是這一類的表達法有可能因為不小心修改了網頁的內容而讓 JavaScript 的程式無法正確執行。
• 有了以上的說明，我們知道每一次使用者按了一下 "Click to change" 按鈕， 則 form 中的文字欄位內的內容就會改變。form 中的文字欄位元件其實也就是 document.myform.elements[0] 物件，而更改其內容只需要把它的 value 值更改即可。
• 雖然不少網頁用的標籤是 <button>，但是如果之前的 button 是用

  <button onClick="change();">Cick to change</button>
  

  來完成，則只有 IE 能夠正確的執行，Firefox 卻無法正確執行。

---