Question

IM试图测试以查看我的代码是否设置正确，可以访问表单的文本值。我只是尝试访问文本值，然后使用Console.log确认其值。

这是我的代码（

<body>
        <form id="form">
        <input type="text" id="item">
        <button class="Btn add item">Add item</button>
        </form>
        <script type="text/javascript">
          document.getElementById("item").onclick = function() {
           var output = document.getElementById("item").value;

           console.log(output);
          }
        </script>
      </body>

当我在Chrome的开发工具中运行它时，没有任何反应。没有错误，控制台不会记录我在表单中输入的值。

Answer 1

您可以尝试以下操作：

var output = document.getElementById("item").innerText;

Answer 2

您的错误是ID属性名称不正确。小心！

<body>
<form id="form">
    <input type="text" id="input"/>
    <button id="button"  type="button">Add item</button>
</form>
</body>

<script type="text/javascript">
    document.getElementById("button").onclick = function(){
        var str = document.getElementById("input").value;
        console.log("Your string is: " +  str);
    }
</script>

Answer 3

您的输入标签缺少value属性，并且没有默认值。

Answer 4

我假设您想在单击按钮时而不是输入时记录该值。试试看：

<form id="form">
  <input type="text" id="item"/>
  <button id="btn" class="Btn add item" type="button">Add item</button>
</form>
<script type="text/javascript">
  document.getElementById("btn").onclick = function() {
    var output = document.getElementById("item").value;
    console.log(output);
  }
</script>

Answer 5

很难从示例中了解您要查找的内容，但是如果您希望在键入时记录值，可以通过以下方式完成：

    <form id="form">
    <input type="text" id="item">
    <button class="Btn add item">Add item</button>
    </form>
    <script type="text/javascript">
    document.getElementById('item').addEventListener('keyup', function(e){
        var output = e.target.value
        console.log(output)
    })
    </script>

Answer 6

正如 Markus Zeller 所说，当您的输入标签没有值时，console.log将显示一个空格。尝试输入任意数量的字符，然后将焦点对准，然后再次单击输入，您将看到它完全显示您刚刚输入的输入标签的值。

从表单中获取价值

6 个答案: