參考表單元素使用javascript

Question

我不明白爲什麼我的javascript不工作......一切看上去雖然確定...

<form id = "lol" method="get" name="lol" action="" style="display:inline; vertical-align:middle"> 
    <table style="display:inline; vertical-align:middle"> 
     <tr> 
      <td style="width:80%"> 
       xxx 
      </td> 
      <td> 
       <select name="A"> 
        <option value="xxx">xxx</option> 
        <option value="xxx">xxx</option> 
        <option value="xxx">xxx</option> 
       </select> 
      </td> 
      <td> 
       <input type="submit" value="Valider"/> 
       <input type="hidden" name="B" value=""/> 
       <input type="hidden" name="C" value=""/> 
      </td> 
     </tr> 
    </table> 
</form> 

而且我的javascript：

<script> 
var form=document.getElementById("lol"); 
form.elements['A'].value="xxx"; 
</script> 

形式被找到，但是找不到元素A ...

Answer 1

您需要確保您的JavaScript代碼正在運行之後已經創建了DOM元素。如果你這樣做，你的代碼工作。

可以確保由任一

1. 把代碼中的文檔中的元素之後（如下所示），或者使用

2. 事件的load或ready風格。

Live example

<form id = "lol" method="get" name="lol" action="" style="display:inline; vertical-align:middle"> 
    <table style="display:inline; vertical-align:middle"> 
     <tr> 
      <td style="width:80%"> 
       xxx 
      </td> 
      <td> 
       <select name="A"> 
        <option value="xxx">xxx</option> 
        <option value="xxx">xxx</option> 
        <option value="xxx">xxx</option> 
       </select> 
      </td> 
      <td> 
       <input type="submit" value="Valider"/> 
       <input type="hidden" name="B" value=""/> 
       <input type="hidden" name="C" value=""/> 
      </td> 
     </tr> 
    </table> 
</form> 
<script> 
    var form=document.getElementById("lol"); 
    form.elements['A'].value="xxx"; 
</script>