Tengo una lista de elementos en una página HTML. Necesito hacer los elementos como enlaces. Cuando un usuario hace clic en cualquiera de ellos, debería poder copiar el texto de su contenido y pasarlo a una función, por ejemplo, alert(the_value_of_selected_list_item) .
Aquí está mi intento para:
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>Podrías hacerlo de esta manera:
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>¿Como esto?
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>