hello, Why colorPicked is not return and just work in the EventListener

why colorPicked don’t return from the function this happens also when I add return the console says it’s not identified her is the html and js because I need to work with the colorPicked in outside of the function`

const mainColor = document.querySelector(".mainColor");
const colors = document.querySelector(".colors");

colors.addEventListener("click", (e) => {
  colors.id = "dis";
  const colorPicked = e.target.className;
  mainColor.style.backgroundColor = colorPicked;
  return colorPicked;
});

mainColor.addEventListener("click", () => {
  switch (colors.id) {
    case "dis":
      colors.id = "";
      break;
    case "":
      colors.id = "dis";
  }
});
console.log(colorPicked);
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="mainColor"></div>
    <div id="dis" class="colors">
      <div class="#ee6633"></div>
      <div class="#ee3377"></div>
      <div class="#2ee8bb"></div>
      <div class="#ee3311"></div>
      <div class="#d208cc"></div>
      <div class="#16141c"></div>
      <div class="#dd1188"></div>
      <div class="#7e4071"></div>
    </div>

    <!-- Scripts -->
    <script src="sandbox.js"></script>
  </body>
</html>

33 thoughts on “hello, Why colorPicked is not return and just work in the EventListener”

  1. i need a loan of 1000 today, i need loan urgently. i need a loan of 3000 today i need loan need a loan i need a direct loan lender, cash advance loans direct deposit, cash advances, cash advance online, cash advance title loans. Financial affairs describes business, designed for companies.

    Reply

Leave a Comment