How to implement this function declaration or function expression with arrow function?-CodePudding

<p ><a href="#"> Question:What is JavaScript?</a></p>
    <p >
      JavaScript is a lightweight, interpreted programming language with
      object-oriented capabilities that allows you to build interactivity into
      otherwise static HTML pages. The general-purpose core of the language has
      been embedded in Netscape, Internet Explorer, and other web browsers.
    </p>
    <p >
      <span> Question:</span> What are the data types supported by JavaScript?
    </p>
    <p >
      The data types supported by JavaScript are: Undefined Null Boolean String
      Symbol Number Object
    </p>
    <p >
      <span> Question:</span> What is the purpose of ‘This’ operator in
      JavaScript?
    </p>
    <p >
      The JavaScript this keyword refers to the object it belongs to. This has
      different values depending on where it is used. In a method, this refers
      to the owner object and in a function, this refers to the global object.
    </p>

.qn {
  user-select: none;
  position: relative;
  background-color: orangered;
  padding: 5px 0px 5px 10px;
  color: white;
  border-bottom: 1px solid #ddd;
}

.qn::after {
  content: " ";
  position: absolute;
  right: 10px;
  font-weight: bold;
}

.qn.active::after {
  content: "-";
}
.qn.active   .answ {
  display: block;
}

.answ {
  display: none;
}

const qn = document.querySelectorAll(".qn");
const answ = document.querySelectorAll(".answ");

// ------------------------------------------------------------------------ FUNCTION DECLARATION

// for (let i = 0; i < qn.length; i  ) {
//   qn[i].addEventListener("click", showAnswer);

//   function showAnswer() {
//     qn[i].classList.toggle("active");
//   }
// }

// ------------------------------------------------------------------------- FUNCTION EXPRESSION

for (let i = 0; i < qn.length; i  ) {
  qn[i].addEventListener("click", function showAnswer() {
    qn[i].classList.toggle("active");
  });
}

// ---------------------------------------------------------------------

// --------------------------------------------------------------------- //ARROW FUNCTION ?????? // ------------------------------------------------------------------------

How to implement this function expression or function declaration with arrow function.

const qn = document.querySelectorAll(".qn");
const answ = document.querySelectorAll(".answ");

// ---------------------------------------------------------------------------------
//FUNCTION EXPRESSION

for (let i = 0; i < qn.length; i  ) {
  qn[i].addEventListener("click", function showAnswer() {
    qn[i].classList.toggle("active");
  });
}
// ---------------------------------------------------------------------------------

 // ---------------------------------------------------------------------
//ARROW FUNCTION

   //???????????????????????
//??????????????????????? 
//???????????????????????                   
// ---------------------------------------------------------------------------------

// BOTH FUNCTION EXPRESSION AND ARROW FUNCTION WORKS WHAT I NEED TO KNOW IS HOW TO IMPLEMENT THIS
// WITH ARROW FUNCTION

// ---------------------------------------------------------------------------------
//ARROW FUNCTION

//???????????????????                  
// ---------------------------------------------------------------------------------

p.answ {
  background-color: green;
  padding: 5px 0px 5px 10px;
}

.qn {
  user-select: none;
  position: relative;
  background-color: orangered;
  padding: 5px 0px 5px 10px;
  color: white;
  border-bottom: 1px solid #ddd;
}

.qn::after {
  content: " ";
  position: absolute;
  right: 10px;
  font-weight: bold;
}

.qn.active::after {
  content: "-";
}
.qn.active   .answ {
  display: block;
}

.answ {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
    <script src="jquery-3.6.0.js"></script>
  </head>
  <body>
  <p ><a href="#"> Question:What is JavaScript?</a></p>
    <p >
      JavaScript is a lightweight, interpreted programming language with
      object-oriented capabilities that allows you to build interactivity into
      otherwise static HTML pages. The general-purpose core of the language has
      been embedded in Netscape, Internet Explorer, and other web browsers.
    </p>
    <p >
      <span> Question:</span> What are the data types supported by JavaScript?
    </p>
    <p >
      The data types supported by JavaScript are: Undefined Null Boolean String
      Symbol Number Object
    </p>
    <p >
      <span> Question:</span> What is the purpose of ‘This’ operator in
      JavaScript?
    </p>
    <p >
      The JavaScript this keyword refers to the object it belongs to. This has
      different values depending on where it is used. In a method, this refers
      to the owner object and in a function, this refers to the global object.
    </p>

    <script src="main.js"></script>

    <p></p>
  </body>
</html>

function expression and function declaration is working. How to implement this code using Arrow function? Please help. Thank you.

CodePudding user response：

Here's how to do it:

for (let i = 0; i < qn.length; i  ) {
  qn[i].addEventListener("click", () => qn[i].classList.toggle("active"));
}

CodePudding user response：

for (let i = 0; i < qn.length; i  ) {
      qn[i].onclick =()=>{
        qn[i].classList.toggle("active");
      }

[on click] can take part in [addEventListener("click")] and your arrow function