Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ get a value from a clicked href

Posted by: Londy Dec 19 2023, 05:34 AM

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>

Posted by: CharlesEF Dec 19 2023, 06:07 AM

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

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.

Posted by: Christian J Dec 19 2023, 06:21 AM

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/Learn/HTML/Howto/Use_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/grouping-content.html#attr-li-value (again the the custom DATA-... attribute might be more suitable).

Posted by: Jason Knight Dec 22 2023, 09:03 AM

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.

Posted by: Christian J Dec 22 2023, 02:16 PM

QUOTE(Jason Knight @ Dec 22 2023, 03:03 PM)

nose-breathing

Shouldn't that be mouth-breathing?

Posted by: Londy Jan 13 2024, 04:21 AM

Thank you to you Christian and Jason

Posted by: Jason Knight Jan 15 2024, 04:42 AM

QUOTE(Christian J @ Dec 22 2023, 02:16 PM)

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.

Posted by: Darin McGrew Jan 17 2024, 10:06 AM

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.