How to copy a list item when a user clicks on it plain HTML CSS JS?

March 31, 2022

I have a list of items in a HTML page. I need to make the list items as a link.
When a user clicks any of list item links, I should be able to copy the value of item and pass it to a function, e.g. alert(the_value_of_selected_list_item)

Here is the HTML page, where in I make the list on which user can hover

<!DOCTYPE html>
<html lang="en-US" class="no-js">

<head>
    <title> Demo</title>
    <style>
        h1 {
          text-align: center;
        }
        
        h2 {
          text-align: left;
        }
        #leftsideMenu ul li {
  border-bottom: 1px dashed lightgray;
  background-color: cadetblue;
}

#leftsideMenu ul li a {
  padding: 8px 20px 8px 20px;
  color: white;
  display: block;
}

#leftsideMenu ul li a:hover {
  background-color: rgb(238, 224, 144);
  transition: 0.5s;
  padding-left: 30px;
  padding-right: 10px;
}        
    </style>

    
</head>
<body>

    <div id="leftsideMenu">
       
    <h3> Data</h3>
    <ul style="list-style-type:none">
        <li><a href="#">this is first list item</a></li>    
        <li><a href="#">this is second list item</a></li>  
        <li><a href="#">this is third list item</a></li>          
 
    </ul>  
    


    
</div>
    </body>
</html>

How do I copy the item value of the list and pass it to dummy alert function?

>Solution :

Like this?

function doSomthing(data){
alert(data.innerText)
}

<!DOCTYPE html>
<html lang="en-US" class="no-js">

<head>
    <title> Demo</title>
    <style>
        h1 {
          text-align: center;
        }
        
        h2 {
          text-align: left;
        }
        #leftsideMenu ul li {
  border-bottom: 1px dashed lightgray;
  background-color: cadetblue;
}

#leftsideMenu ul li a {
  padding: 8px 20px 8px 20px;
  color: white;
  display: block;
}

#leftsideMenu ul li a:hover {
  background-color: rgb(238, 224, 144);
  transition: 0.5s;
  padding-left: 30px;
  padding-right: 10px;
}        
    </style>

    
</head>
<body>

    <div id="leftsideMenu">
       
    <h3> Data</h3>
    <ul style="list-style-type:none">
        <li><a onclick="doSomthing(this)"  href="javascript:void(0)">this is first list item</a></li>    
        <li><a href="javascript:void(0)">this is second list item</a></li>  
        <li><a href="javascript:void(0)">this is third list item</a></li>          
 
    </ul>  
    


    
</div>
    </body>
</html>