select 元素來自鏈接到同一個 js 文件的不同 html 文件

Question

我有兩個不同的 html 文件，每個文件都有一個按鈕 BTN 1 和 BTN 2，鏈接到同一個 js 文件，所以當我單擊其中一個按鈕時，我需要插入一個 class 來更改兩個頁面的背景顏色，怎么能我 select 兩個按鈕都用 js 來做到這一點。

我試過 select 這樣的按鈕：

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

但我明白了：

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

只需一個按鈕。 如果我在單擊時插入 class 它只會更改該頁面的正文，但無論我單擊什么按鈕，我都需要更改兩者。

我怎么能這樣做

謝謝你的幫助

<!DOCTYPE html>
<html lang="en">
<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 lang="en">
<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>

Answer 1

這是你要找的嗎？

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

<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>

Answer 2

您的代碼中的問題可能與選擇有關。 當您使用getElementsByClassName時，您將獲得一個元素數組，而不是單個元素。 因此，如果您將使用document.getElementsByClassName("hola")[0]您將獲得您的元素。

我認為您應該使用id而不是className ，因為當您使用document.getElementsByClassName("abc")時，您將獲得相同 class 的元素數組。 由於您在 2 個不同的頁面中使用它，並且可能對其他元素也使用相同的 class，因此數組的順序可能不同，並且很難找到您的按鈕。

使用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>

select 元素來自鏈接到同一個 js 文件的不同 html 文件

問題描述

2 個解決方案

解決方案1
0 2020-04-07 00:26:14

解決方案2
0 2020-04-07 05:32:03

select 元素來自鏈接到同一個 js 文件的不同 html 文件

問題描述

2 個解決方案

解決方案1 0 2020-04-07 00:26:14

解決方案2 0 2020-04-07 05:32:03

解決方案1
0 2020-04-07 00:26:14

解決方案2
0 2020-04-07 05:32:03