为什么单击按钮时 getElementById 给我 null？

Question

当我拿到控制台时，我无法理解：

TypeError: boton is null

我已经 read about the error 查看了文档，但我仍然不明白为什么按钮为空。

所需的操作是单击按钮，如果我选择了文本，它将被粘贴到控制台中。

我刚收到错误消息。

这些是我的两个文件的确切内容：index.html 和 JS 文件。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js.js" type="text/javascript"></script>

</head>
<body>

  <style>

  </style>

  <button id="resaltador">Resaltar</button>

<div class="card" style="width: 35rem;">
    <div class="card-body">
      <h5 class="card-title" id="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lorem elit, porta eget imperdiet eu, aliquam in nisi. Vestibulum egestas finibus diam sit amet suscipit. Aenean faucibus eros magna, aliquam fermentum mi convallis non.</p>
    </div>
  </div>
</body>
</html>

JS

function seleccionarTexto() {
    //copy the selected text on a mouseup
    var textoCopiado
    document.addEventListener('mouseup', (e)=> {
        if(window.getSelection().toString().length > 0) {
            textoCopiado = window.getSelection().toString()    
        }
    })
        
    //if we click the button
    var boton = document.getElementById('resaltador')
    boton.addEventListener('click', (e)=> console.log(textoCopiado) )


}
seleccionarTexto()

Answer 1

那是因为你的脚本是在你的html创建之前执行的，你需要在你的<body />

下面添加这个脚本<script src="js.js" type="text/javascript"></script>

Answer 2

您在 boton 元素完成加载之前调用脚本，这会导致空值，因为该按钮尚不存在。

您可以将 <script src="js.js" type="text/javascript"></script> 更改为 <script defer src="js.js" type="text/javascript"></script>，添加 defer 属性以告诉浏览器推迟执行，直到页面加载完成。

为什么单击按钮时 getElementById 给我 null？

Why getElementById gives me null when I click the button?

javascript

button

getelementbyid

HTML

JS