Question

我正在尝试将文本输入记录到Chrome中的开发者控制台。这是我的HTML：

<html>
<body>
<div class="container">
    <div class="form-group">
      <form name="myForm">
      <label name='header'> Some label </label>
        <input id='userInput' type='text' class='form-control' placeholder="some javascript value comes here" name='myInput'>
<button onclick="someFunction()"> Submit </button>
      </form>
      </div>
      </div>
</body>
</html>

这里是JavaScript：

<script>
function someFunction(){
var userInput=document.getElementById('userInput');
console.log('userInput);
}
</script>

任何人都可以告诉我哪里出错了。

Answer 1

对于console.log（）。你正在添加＆＃39;。它应该是console.log（variable_name）。在这种情况下，console.log（userInput）

<input id='userInput' type='text' class='form-control' placeholder="some javascript value comes here" name='myInput'>
<button onclick="someFunction()"> Submit </button>

<script>
function someFunction(){
var userInput=document.getElementById('userInput').value;
console.log(userInput);
}

Answer 2

你的javascript中有一个拼写错误您撰写了'userInput，但应该是userInput

<script>
function someFunction(){
var userInput=document.getElementById('userInput');
// WRONG VARIABLE NAME USED console.log('userInput);
console.log(userInput); //RIGHT VARIABLE NAME USED
}
</script>

Answer 3

一个。您需要记录的不是<input>文本框（userInput），而是文本框（userInput.value）中的 value 。

解决方案： console.log(userInput.value)

B中。表单控件的要求（例如<input>，<button>等）是 <form>内外的不同。

解决方案：添加到<button>代码：type="button" 或移动<button>标记<{1}}标记的外。
1. 当<form>代码为<button>的子代时，<form>代码需要type属性。
  - <button type='button" 或 "submit" 或 "reset">
2. 如果<button>标记没有type属性，则默认为type="submit"。提交按钮将发送表单控件的数据（带有name属性的表单标记）并刷新页面。
3. <button> 外 <form>代码不需要type属性。
4. 任何<input>需要type或默认为type="text"
5. type="submit" 或 "reset" 外 <form>代码需要form=" 表单ID "

在演示中，黑色文本按钮为<input>个标签，红色文本按钮为<button>个标签。 <form>中的数据最终到达服务器，结果可以在响应中看到或在客户端中处理，可以在日志中看到或显示在DOM中。 <form>设置为将数据发送到实时测试服务器以显示响应。

演示

function xFunction(e) {
  var userInput = document.getElementById('userInput');
  console.log(userInput.value);
}

button {
  color: red
}

form {
  border: 1px solid #000
}

<html>

<body>
  <div class="container">
    <div class="form-group">
      <form id="xForm" action='https://httpbin.org/post' method='post'>
        <label> Some label </label>
        <input id='userInput' type='text' class='form-control' placeholder="some javascript value comes here" name='userInput'>
        <button onclick="xFunction()">OP button No type</button>
        <br>
        <label>&lt;input&gt;</label>
        <input type='submit'>
        <input type='reset'><br>
        <label style='color:blue'>This is runs function and doesn't send data: </label>
        <input type='button' value="Button" onclick='xFunction()'><br>
        <label style='color:red'>&lt;button&gt;</label>
        <button type='submit'>Submit</button>
        <button type='reset'>Reset</button><br>
        <label style='color:blue'>This is runs function and doesn't send data: </label>
        <button onclick="xFunction()" type='button'> Button</button>
      </form>
      <label>type="submit" outside of form#xForm</label>
      <input type='submit' value='No form attribute'>
      <input type='submit' form='xForm' value='form="ID of <form>"'><br>
      <label style='color:blue'>This is runs function and doesn't send data: </label>
      <button onclick="xFunction()">OP button No type</button>
    </div>
  </div>

</body>

</html>

Javascript：无法将文本输入记录到控制台

3 个答案:

演示