I have a list of items in a HTML page. I need to make the items as links. When a user clicks any of them, I should be able to copy its content text and pass it to a function, e.g. alert(the_value_of_selected_list_item).
Here is my attempt so for:
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;
}<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>You coud do it this way:
const links = document.querySelectorAll("#leftsideMenu a");
links.forEach(l=> l.addEventListener("click", (e)=>{
e.preventDefault();
alert(l.textContent)
}))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;
}<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>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>