The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> get a value from a clicked href, I need to get 'espresso' when I click the 1st link etc
Londy
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post 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>
$('li a').click(function(e){
e.preventDefault();
let val = $(this).text();
console.log(val);
});
</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.

This post has been edited by CharlesEF: Dec 19 2023, 06:08 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 19 2023, 06:21 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,661
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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Dec 22 2023, 09:03 AM
Post #4


Advanced Member
****

Group: Members
Posts: 103
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 22 2023, 02:16 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(Jason Knight @ Dec 22 2023, 03:03 PM) *

nose-breathing

Shouldn't that be mouth-breathing? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Londy
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Jan 15 2024, 04:42 AM
Post #7


Advanced Member
****

Group: Members
Posts: 103
Joined: 25-December 22
Member No.: 28,719
QUOTE(Christian J @ Dec 22 2023, 02:16 PM) *

Shouldn't that be mouth-breathing? unsure.gif

"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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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.
biggrin.gif biggrin.gif biggrin.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 01:49 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC