我不能用查询选择器全部选择相同的类元素。我使用 VS 代码编辑器

Question

在 javascript 文件中，我使用查询选择器选择相同的类元素都是这样的...

const buttons = document.querySelectorAll(".button");

在html文件中，我这样写...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
  </head>
  <body>

    <script src="index.js"></script>
    
    <button class="button" value="rock" style="background-color: rgb(240, 20, 20)"></button>

    <button class="button" value="paper" style="background-color: rgb(20, 240, 20)"></button>
    
    <button class="button" value="scissor" style="background-color: rgb(20, 20, 240)"></button>

  </body>
</html>

选择元素后，我尝试控制“按钮”。但是我得到的是nodelist(0)。您可以在下图中看到它...

我看了所有的教程，学会了怎么做。我做了完全一样的，但结果不是我所期望的。谁能告诉我是我弄错了还是需要补充什么？

Answer 1

导入 js 脚本文件页脚。

等待 DOM 加载

document.addEventListener("DOMContentLoaded", function(){
    const buttons = document.querySelectorAll(".button");
    console.log(buttons);
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
  </head>
  <body>

    
    <button class="button" value="rock" style="background-color: rgb(240, 20, 20)"></button>

    <button class="button" value="paper" style="background-color: rgb(20, 240, 20)"></button>
    
    <button class="button" value="scissor" style="background-color: rgb(20, 20, 240)"></button>
      <script src="index.js"></script>

  </body>
</html>

我不能用查询选择器全部选择相同的类元素。我使用 VS 代码编辑器

问题描述投票：0回答：1

1个回答

最新问题

我不能用查询选择器全部选择相同的类元素。我使用 VS 代码编辑器

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1