使用節點列表改變頁面的背景顏色

Question

我正在嘗試創建兩個函數，當輸入框（顏色選擇器）的值發生更改時，它們將更改我的 HTML 頁面的背景顏色。

這是我的 JavaScript：

function backgroundColor() {
  let bod = document.getElementsByTagName("body")[0];
  let bgc = document.getElementById('bgColor');

  bgc.addEventListener("change", function(){
    color(bod, bgColor.value);
  });
}

function color(node, color){
  for (let n of node){
    n.style.backgroundColor = color;
  }
}

和 HTML：

<p>Background Color: <input type="color" id="bgColor" value="#FFFFFF"/></p>

我不確定如何格式化，如果不清楚，請見諒！

Answer 1

addEventListener 回調有一個事件參數，其中包含輸入值，因此 function 應該是這樣的

 bgc.addEventListener("change", function(event){
    bod.style.backgroundColor  = event.target.value;
  });

不需要循環。

Answer 2

你有很多不同的事情出錯了。

• 對bgColor.value的引用應該是bgc.value 。
• 你永遠不會調用backgroundColor()所以你的聽眾永遠不會被添加。
• 您將單個節點傳遞給color()但然后嘗試使用for()調用對其進行迭代。
• 您正在使用getElementsByTagName()這沒有錯，但除非您需要對HTMLCollection提供的元素的實時引用，否則您應該堅持使用querySelector或getElementById ，它們都返回單個HTMLElement或querySelectorAll返回 static NodeList

 function backgroundColor() { let bod = document.querySelector('body'); let bgc = document.getElementById('bgColor'); bgc.addEventListener("change", function(){ color(bod, bgc.value); }); } function color(node, color){ node.style.backgroundColor = color; } backgroundColor()

 <p>Background Color: <input type="color" id="bgColor" value="#FFFFFF"/></p>

Answer 3

這種方式（與 css 變量）

 document.getElementById('bt-color').addEventListener('change',function() { document.body.style.setProperty('--vColor', this.value) })

 body { --vColor: #ffffff; background-color: var(--vColor); }

 <input type="color" id="bt-color" value="#ffffff">