javascript - 使用 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风格的事件。

活生生的例子

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