Question

所以我收到此错误：

script.js:44 Uncaught ReferenceError: myname is not defined

指向此行：

myname = document.getElementById("#text_name").value;

但是在HTML中，它存在：

<form class="frm" id="create_text">
  <div class="texttitle">Send</div>
  <input id="text_name" type="text" class="form_element" placeholder="text" name="my_text" required/>
  <textarea rows="5" id="actual_text" class="form_element" name="actual_text" placeholder="Text" required></textarea>
  <button type="submit" class="btn">Send text</button>
</form>

我什至尝试使用查询选择器：

myname = document.querySelector("text_name").value;

Answer 1

您已经#的使用方法是从前开始的。

您正在寻找：

myname = document.getElementById("text_name").value;

或者：

myname = document.querySelector("#text_name").value;

使用.getElementById()引用ID时不需要#，但是使用.querySelector()引用ID时需要。

>

Answer 2

更正了#问题之后，请确保您没有在DOM加载元素之前尝试找到该元素。将<script>放在正文（</body>）关闭之前，因为到解析器到达该点时，所有元素都将被解析。

这行不通：

<body>

<script>
  // This won't work because, the HTML element hasn't been reached by the parser yet.
  var myname = document.getElementById("text_name").value;
</script>

<form class="complex_form" id="create_text">
  <div class="texttitle">Send</div>
  <input id="text_name" type="text" class="form_element" placeholder="text" name="my_text" required/>
  <textarea rows="5" id="actual_text" class="form_element" name="actual_text" placeholder="Text" required></textarea>
  <button type="submit" class="btn">Send text</button>
</form>

</body>

移动脚本可以解决此问题：

<body>

<form class="complex_form" id="create_text">
  <div class="texttitle">Send</div>
  <input id="text_name" type="text" class="form_element" placeholder="text" name="my_text" required/>
  <textarea rows="5" id="actual_text" class="form_element" name="actual_text" placeholder="Text" required></textarea>
  <button type="submit" class="btn">Send text</button>
</form>

<script>
  // This works because now, the HTML element has been reached by the parser.
  var myname = document.getElementById("text_name").value;
</script>

</body>

此外，如果要获取表单字段的value，则必须等待更长的时间，因为必须给用户输入值的机会。对于这种类型的操作，您会将代码绑定到事件处理程序，该事件处理程序在用户输入条目后触发。因此，实际上，代码将是这样的：

<body>

<form class="complex_form" id="create_text">
  <div class="texttitle">Send</div>
  <input id="text_name" type="text" class="form_element" placeholder="text" name="my_text" required/>
  <textarea rows="5" id="actual_text" class="form_element" name="actual_text" placeholder="Text" required></textarea>
  <button type="submit" class="btn">Send text</button>
</form>

<button type="button">Check the input value</button>

<script>
  // Get a reference to the button
  var btn = document.querySelector("button[type='button']");
  
  // Add a click event handler. This handler won't run until someone
  // clicks the button, which would be after someone enters text into the input
  btn.addEventListener("click", function(){
    // This works because now, the HTML element has been reached by the parser.
    var myname = document.getElementById("text_name").value; 
    console.log(myname);
  });

</script>

</body>

未被捕获的TypeError：存在时无法读取null的属性“值”

2 个答案: