从链接到同一个js文件的不同html文件中选择元素

从链接到同一个js文件的不同html文件中选择元素

我有两个不同的 html 文件，每个文件都有一个按钮 BTN 1 和 BTN 2，链接到同一个 js 文件，所以当我单击其中一个按钮时，我需要插入一个类来更改两个页面的背景颜色，怎么可能我用js选择了两个按钮来做到这一点。

我试图选择这样的按钮：

var ccc = document.getElementsByClassName("hola"); 控制台.log(ccc);

但我明白了：

HTMLCollection [button.hola] 长度：1 0：button.hola 原型：HTMLCollection

只需一个按钮。如果我在单击时插入一个类，它只会更改该页面的正文，但无论我单击什么按钮，我都需要更改两者。

我怎么能这样做

谢谢你的帮助

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<button class="hello">BTN 1</button>

<script src="js/script.js"></script>

</body>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<button class="hello">BTN 2</button>

<script src="js/script.js"></script>

</body>

眼眸繁星

浏览 215回答 2

2回答

凤凰求蛊

您的代码中的问题可能与选择有关。当您使用时，getElementsByClassName您将获得一个元素数组，而不是单个元素。因此，如果您将使用document.getElementsByClassName("hola")[0]，您将获得您的元素。我认为您应该使用id而不是className，因为当您使用时，document.getElementsByClassName("abc")您将获得同一类的元素数组。由于您在 2 个不同的页面中使用它，并且可能对其他元素也使用相同的类，因此数组的顺序可能不同，并且很难找到您的按钮。用于document.getElementById("someID")获取特定元素，并对id两个按钮使用相同的元素（因为它们位于不同的页面上，这应该不是问题）。let button = document.getElementById("myRedBodyButton");button.addEventListener('click', function() {  document.body.classList.add("red");});.red {  background: red}<button id="myRedBodyButton">clickMe</button>

0

0

至尊宝的传说

这是你要找的吗？<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <button id="hello">BTN 1</button>  <script>       var ccc = document.querySelector("button#hello")       ccc.addEventListener('click', function() {       document.body.style.backgroundColor = 'red';     })  </script></body></html>

0

0

随时随地看视频慕课网APP

相关分类

JavaScript