此 js 代码在 html 文件中不起作用。但是，当我将代码粘贴到控制台时，相同的 js 代码可以工作答案

【问题标题】：This js code is not working in html file. But, same js code works when I paste the code at console此 js 代码在 html 文件中不起作用。但是，当我将代码粘贴到控制台时，相同的 js 代码可以工作
【发布时间】：2021-08-08 08:18:38
【问题描述】：

console.log(document.querySelector("button").value); 不在html 文件中工作。但是当我在控制台中使用它时，相同的代码会起作用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      console.log(document.querySelector("button").value);
    </script>
  </head>
  <body>
    <button value="my value">click</button>
  </body>
</html>

这是我第一次使用 stackoverflow。如有错误请见谅。

【问题讨论】：

你应该在HTML之后添加JS吗？ JS 找不到元素，因为 HTML 尚未加载...
欢迎来到 SO。该脚本在 DOM 加载之前运行。将脚本移动到 </body> 之前。
现在可以工作了。为什么它不能工作呢？
因为你的脚本在DOM之前加载。

标签： javascript html console javascript-objects

【解决方案1】：

Document.querySelector 如果在任何元素加载之前运行，将找不到匹配项。

您可以使用DOMContentLoaded 事件监听器仅在Document 加载后运行代码。

演示：

<!DOCTYPE html>
<html lang="en">

<head>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      console.log(document.querySelector("button").value);
    });
  </script>
</head>

<body>
  <button value="my value">click</button>
</body>

</html>

【讨论】：

【解决方案2】：

我不明白你想做什么，但如果你希望我的值在你点击按钮时显示在控制台中，你可以这样做：

<!DOCTYPE html>
<html  lang="en">
<head>
<script>
  function press(){
  return console.log(document.querySelector("button").value);}
</script>
</head>
<body>
<button onclick="press()" value="my value">click</button>
</body>
</html>

【讨论】：