get a value from a clicked href, I need to get 'espresso' when I click the 1st link etc |
get a value from a clicked href, I need to get 'espresso' when I click the 1st link etc |
Londy |
Dec 19 2023, 05:34 AM
Post
#1
|
Group: Members Posts: 6 Joined: 19-December 23 Member No.: 29,102 |
CODE <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <ul id ='coffeeList'> <li value='espresso'><a href="#">espresso</a></li> <li value='caramel fudge latte'><a href="#">caramel fudge latte</a></li> <li value='hot chocolate'><a href="#">hot chocolate</a></li> </ul> <script> $('li a').click(function(e){ e.preventDefault(); var href = $(this).attr('href'); console.log(href) }); </script> </body> </html> |
CharlesEF |
Dec 19 2023, 06:07 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
You don't want the href attribute. Since all the a links href contain a '#' that's what you would see. You want the innerHTML/textContent of the a link. In jQuery you do it like this:
CODE <script> You could use .text or .html, you will not see anything on screen. The results are shown in the 'console' tab in your browser's Developer Tools.$('li a').click(function(e){ e.preventDefault(); let val = $(this).text(); console.log(val); }); </script> This post has been edited by CharlesEF: Dec 19 2023, 06:08 AM |
Christian J |
Dec 19 2023, 06:21 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,673 Joined: 10-August 06 Member No.: 7 |
Also, do you want to store the value "espresso" in the link or the LI element in the HTML code?
I'd rather store it in the link, but maybe not as link text (so you're not limited in choice of link text). Depending on the structural/semantic purpose of the coffee list (if any) maybe there's a link attribute you could use, if nothing else the custom DATA-... attribute: https://developer.mozilla.org/en-US/docs/Le...data_attributes Also note that LI's VALUE attribute is not suitable for string values; it's only used for changing the order of an OL list, and must then be an integer: https://html.spec.whatwg.org/multipage/grou...l#attr-li-value (again the the custom DATA-... attribute might be more suitable). |
Jason Knight |
Dec 22 2023, 09:03 AM
Post
#4
|
Advanced Member Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 |
since you have the href as #, why are you using anchors to do button's job? And if it was a button you could put it on value, in your event it would just be event.currentTarget.value instead of all the nonsensical nose-breathing jQuery garbage. Where the only thing jQuery can teach you is how NOT to do anything with JS or HTML
Much less the re-re-render blocking trash of scripts in the <head> Or the single quotes making me think your backend is gonna be garbage too. Of course since this seems to be -- for now at least -- scripting only functionality, NONE of what you've done even belongs in the markup. Which is why I'd gut the markup down to just: CODE <!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="test.screen.css" media="screen"> <title>Document</title> </head><body> </body></html> With this as the scripting. CODE { const beverages = [ [ "espresso", "Espresso" ], [ "caramel", "Caramel Fudge Latte" ], [ "hot chocolate", "Hot Cocolate" ] ], buttonStatics = { onclick : (e) => { console.log(e.currentTarget.value); // do what you want with e.currentTarget.value here }, type : "button" // remember, default is submit }, ul = document.createElement("ul"); ul.className = "beverages"; for (const [ value, textContent ] of beverages) { ul.appendChild( document.createElement("li") ).appendChild( Object.assign( document.createElement("button"), buttonStatics, { textContent, value } ) ); } } Now, if you were going to have ACTUAL href for scripting off fallbacks, that's a different story. |
Christian J |
Dec 22 2023, 02:16 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,673 Joined: 10-August 06 Member No.: 7 |
|
Londy |
Jan 13 2024, 04:21 AM
Post
#6
|
Group: Members Posts: 6 Joined: 19-December 23 Member No.: 29,102 |
Thank you to you Christian and Jason
|
Jason Knight |
Jan 15 2024, 04:42 AM
Post
#7
|
Advanced Member Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 |
Shouldn't that be mouth-breathing? "mouth breathing" is normal people. Normal sucks. Normal people are dumb, gullible, and will believe almost any lie you feed them if it's what they want to be true, or are afraid might be true. See "Wizard's First Rule" Though "nose breathing" really replaced "mouth breathing" in my lexicon during COVID... when we had the people who would begrudgingly wear the mask, but keep it pulled down past their nose completely defeating the point of it. The "stupid" of normal people knows no bounds. |
Darin McGrew |
Jan 17 2024, 10:06 AM
Post
#8
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
QUOTE Though "nose breathing" really replaced "mouth breathing" in my lexicon during COVID... when we had the people who would begrudgingly wear the mask, but keep it pulled down past their nose completely defeating the point of it. I hadn't heard that one before. Thanks for the laugh. Don't get me wrong. I've seen the described behavior among people who wore obligatory masks. But I had never heard that used to suggest that "nose breather" had replaced "mouth breather" as a derogatory term. |
Lo-Fi Version | Time is now: 28th May 2024 - 08:48 AM |