我将如何访问文本字段以操作其中的信息？

Question

我正在尝试使用 id="first" 访问文本字段，以便我可以读取其中的任何信息，甚至可以通过 java 脚本将信息写入其中。这是我尝试的最后一种方法，我知道这行不通，但我的大脑很累，我已经用了好几天了。我是 Java 脚本的新手，我只是把它当作一个实验来玩，但现在它让我发疯了。<script> { var targetDiv = document.getElementById("popover-content-   right").getElementsByClassName("well popover-   right").getElementById("edit-   user").getElementById("first")[0];  targetDiv.textContent = "Hello world!";}</script>我尝试了其他几种方法，但没有奏效。<div id="popover-content-right" class="well popover-right" data- dicomgrid-active-popover="create" style="top: 133px; width: 480px; display: block;"> <form id="edit-user" onsubmit="return saveForm(this)"><div class="form-inline">  <div class="form-group">    <label data-i18n-token="global:first-name">First name</label><br>    <input id="first" data-validate="required" class="form-control">    <span class="help-inline small"></span>  </div>  </div>  </form>  </div>我希望当我向显示在那里的文本字段写一些东西时，例如“Hello world”，但现在我什么也没得到，它只是保持空白。

Answer 1

只是一个简单的document.getElementById应该返回您所需的元素，并.value让您访问元素的值，就像普通变量一样。

onload = function() {

  var textField = document.getElementById("first");

  var value = textField.value; //read

  textField.value = "something"; //write

}

<div id="popover-content-right" class="well popover-right" data- 

dicomgrid-active-popover="create" style="top: 133px; width: 480px; 

display: 

block;"> 

<form id="edit-user" onsubmit="return saveForm(this)">

<div class="form-inline">

  <div class="form-group">

    <label data-i18n-token="global:first-name">First name</label><br>

    <input id="first" data-validate="required" class="form-control">

    <span class="help-inline small"></span>

  </div>

  </div>

  </form>

  </div>