-1
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

The element that is clicked should get a red color, bold and italic font.

beginner18
  • 1
  • 1
  • 5
  • What have you actually tried? It is almost trivial to do it with (1) [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) and (2) [`classList.toggle()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) – Terry Feb 22 '21 at 21:47
  • Yes it is trivial, but I just started learning javascript. – beginner18 Feb 22 '21 at 21:49
  • Then make use of the search function: this is easily covered by many questions that have been asked before. – Terry Feb 22 '21 at 21:50

2 Answers2

-1

Probably not the best solution but it works

function clicker(liID){
   document.getElementById('item' + liID).style.color = "magenta";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="item1" onClick="clicker(1)">First</li>
  <li id="item2" onClick="clicker(2)">Second</li>
  <li id="item3" onClick="clicker(3)">Third</li>
</ul>
Rendolph
  • 433
  • 2
  • 9
-1

Add id to your ul and use it for event listener

ulId.addEventListener('click',(e)=>{
  if(e.target.nodeName==="LI"){
    e.target.style.cssText = "color:red;font-weight:bold; font-style:italic";
  }
})
Matiiv Vasyl
  • 117
  • 3