Button that assigns different color to text in javascript

Question

I am new to javascript. I have a problem but I don't know what it could be. Iam supposed to link my javascript to my html. There are three buttons that should turn the text to a diffrent color on clicking. But it is not working.

// 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");
});

You have declared variable clicker three times with const keyword, you need to change the variable names — Mohammad Faisal
– Mohammad Faisal, Commented Mar 19, 2020 at 10:03
3 variables of const type are declared with same name which will produce error..Change the names. — teddcp
– teddcp, Commented Mar 19, 2020 at 10:07

Mohammad Faisal · Accepted Answer · 2020-03-20 05:40:40Z

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>

Collectives™ on Stack Overflow

Button that assigns different color to text in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related