The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
 
 Reply to this topicStart new topic
Replies
Jason Knight
post Dec 22 2023, 09:03 AM
Post #2


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

Posts in this topic
Londy   get a value from a clicked href   Dec 19 2023, 05:34 AM
CharlesEF   You don't want the href attribute. Since all ...   Dec 19 2023, 06:07 AM
Christian J   Also, do you want to store the value "espress...   Dec 19 2023, 06:21 AM
Jason Knight   since you have the href as #, why are you using an...   Dec 22 2023, 09:03 AM
Christian J   nose-breathing Shouldn't that be mouth-breat...   Dec 22 2023, 02:16 PM
Jason Knight   Shouldn't that be [i]mouth-breathing? :unsur...   Jan 15 2024, 04:42 AM
Londy   Thank you to you Christian and Jason   Jan 13 2024, 04:21 AM
Darin McGrew   :D :D :D I hadn't heard that one before. Than...   Jan 17 2024, 10:06 AM

« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

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

 

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

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

- Lo-Fi Version Time is now: 23rd May 2024 - 02:43 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC