使用javascript引用表单元素

Refer form element with javascript

本文关键字：元素表单引用 javascript 使用更新时间：2023-09-26

我不明白为什么我的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。。。

您需要确保您的JavaScript代码在创建有问题的DOM元素后运行。如果你这样做了，你的代码就工作了。

您可以通过

将代码放在文档中的元素之后（如下所示），或
使用load或ready样式的事件。

实例

<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>