Uncaught TypeError: Cannot read property 'value' of null when it exists

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(), but you do need it when referencing an ID with .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>

Uncaught TypeError: Cannot read property 'value' of null when it exists

Uncaught TypeError: Cannot read property 'value' of null when it exists

html

javascript

getelementbyid