为javascript中的文本分配不同颜色的按钮

Question

我是 javascript 新手。我有一个问题，但我不知道它可能是什么。我应该将我的 javascript 链接到我的 html。有三个按钮可以在点击时将文本变成不同的颜色。但它不起作用。

// this is the red button
const header = document.querySelector("#header");
const clicker = document.querySelector(".clicker-red");

clicker.addEventListener("click", () => {
  header.style.backgroundColor = "red";
  header.classList.add("large");
});

// this is the green button

const clicker = document.querySelector(".clicker-green");

clicker.addEventListener("click", () => {
  header.style.backgroundColor = "green";
  header.classList.add("large");
});

// this is the purple button

const clicker = document.querySelector(".clicker-pruple");

clicker.addEventListener("click", () => {
  header.style.backgroundColor = "purple";
  header.classList.add("large");
});

Answer 1

As I have said in the comments, You cannot declare variable with same name in the same Lexical Environment (i.e, in the same block).

So, you need to change the variable name.

Here is the working example.

const header = document.querySelector("#header");
const clickerRed = document.querySelector(".clicker-red");

clickerRed.addEventListener("click", () => {
  header.style.backgroundColor = "red";
});

// //this is the green button

const clickerGreen = document.querySelector(".clicker-green");

clickerGreen.addEventListener("click", () => {
  header.style.backgroundColor = "green";
});

// // this is the purple button

const clickerPurple = document.querySelector(".clicker-purple");

clickerPurple.addEventListener("click", () => {
  header.style.backgroundColor = "purple";
});

<div id="header">
Header</div>
<button class="clicker-red" type="button">Red</button>
<button class="clicker-green" type="button">Green</button>
<button class="clicker-purple" type="button">Purple</button>