how to get a tag value in href with javascript

Question

There's a piece of html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code</title>
<body>
<div id="suggestions">
content
<p><a href="/pd?email=1@email.com&pd=187&name=kljljl">link</a></p>
<p><a href="/pd?email=6@email.com&pd=187&name=afdsfsa">link</a></p>
</div>
<div id="list">
    kklj
    <p><a href="/pd?email=10@email.com&pd=187&name=4fdaf">link1</a></p>
    dll
    <p><a href="/pd?email=2@email.com&pd=187&name=afdsf">link2</a></p>
    fdf
    <p><a href="/pd?email=1@email.com&pd=187&name=hgfhd">link3</a></p>
    fdsaf
    <p><a href="/pd?email=4@email.com&pd=187&name=ertewt">link4</a></p>
    fdsaf
    <p><a href="/pd?email=5@email.com&pd=187&name=gfdsg">link7</a></p>
    fdasf
    <p><a href="/pd?email=8@email.com&pd=187&name=fdsgfgsg">link3</a></p>
    fdsaf
    <p><a href="/pd?email=dd@email.com&pd=187&name=cxvbvcb">link8</a></p>
    fdsafd
    <p><a href="/pd?email=jh@email.com&pd=187&name=ujjhgh">link3</a></p>
</div>
<script>
document.addEventListener('click', function(e){
  
})
</script>
</html>

I want to be able to get the email value and pd value of the current href when I click on a href under list . I can get it easily with JQuery, but I don't know how to do without it. Any ideas? Thank you.

Answer 1

this way

 const List_els = document.querySelector('#list') List_els.addEventListener('click', function(e) { if (!e.target.matches('a')) return // verify where the click is done e.preventDefault() // disable the href page loading let url = new URL(e.target.href) console.clear() console.log( url.searchParams.get('email')) setTimeout(console.clear,3000) })

 p { margin: .1em 0 0 2em ; }

 <div id="suggestions"> content <p><a href="/pd?email=1@email.com&pd=187&name=kljljl">link</a></p> <p><a href="/pd?email=6@email.com&pd=187&name=afdsfsa">link</a></p> </div> <div id="list"> kklj <p><a href="/pd?email=10@email.com&pd=187&name=4fdaf">link1</a></p> dll <p><a href="/pd?email=2@email.com&pd=187&name=afdsf">link2</a></p> fdf <p><a href="/pd?email=1@email.com&pd=187&name=hgfhd">link3</a></p> fdsaf <p><a href="/pd?email=4@email.com&pd=187&name=ertewt">link4</a></p> fdsaf <p><a href="/pd?email=5@email.com&pd=187&name=gfdsg">link7</a></p> fdasf <p><a href="/pd?email=8@email.com&pd=187&name=fdsgfgsg">link3</a></p> fdsaf <p><a href="/pd?email=dd@email.com&pd=187&name=cxvbvcb">link8</a></p> fdsafd <p><a href="/pd?email=jh@email.com&pd=187&name=ujjhgh">link3</a></p> </div>

Answer 2

Here I've written a function looks like jQuery but it's pure Vanilla JavaScript. It's the standard way to get value from any URL. Here you justt have to call this function to get search data. You can apply multiple events here like click, mouseenter etc

 QueryURL('a').on( 'click', response => {
    console.log(response)
} )

Attachment / Main code is here

 window.onload = function () { /** * * * Get url query value * @param selector refers to anchor link * */ const QueryURL = selector => { const methods = { element : document.querySelectorAll( selector ), on: function( eventName, callback ) { this.element.forEach( btn => { btn.addEventListener( eventName, ev => { ev.preventDefault(); ev.stopPropagation(); if( ev.target.href ) { const url = new URL(ev.target.href); const searchParams = new URLSearchParams( url.search ); callback( Object.fromEntries(searchParams) ) return false; } }) } ) } } return methods; } /* * ======================================== * Init / Call the function * ======================================== */ QueryURL('a').on( 'click', response => { console.log(response) } ) }

 <div id="suggestions"> content <p><a href="/pd?email=1@email.com&pd=187&name=kljljl">link</a></p> <p><a href="/pd?email=6@email.com&pd=187&name=afdsfsa">link</a></p> </div> <div id="list"> kklj <p><a href="/pd?email=10@email.com&pd=187&name=4fdaf">link1</a></p> dll <p><a href="/pd?email=2@email.com&pd=187&name=afdsf">link2</a></p> fdf <p><a href="/pd?email=1@email.com&pd=187&name=hgfhd">link3</a></p> fdsaf <p><a href="/pd?email=4@email.com&pd=187&name=ertewt">link4</a></p> fdsaf <p><a href="/pd?email=5@email.com&pd=187&name=gfdsg">link7</a></p> fdasf <p><a href="/pd?email=8@email.com&pd=187&name=fdsgfgsg">link3</a></p> fdsaf <p><a href="/pd?email=dd@email.com&pd=187&name=cxvbvcb">link8</a></p> fdsafd <p><a href="/pd?email=jh@email.com&pd=187&name=ujjhgh">link3</a></p> </div>

how to get a tag value in href with javascript

Question

2 answers

solution1
1 ACCPTED 2021-10-16 00:43:49

solution2
0 2021-10-16 03:32:09

how to get a tag value in href with javascript

Question

2 answers

solution1 1 ACCPTED 2021-10-16 00:43:49

solution2 0 2021-10-16 03:32:09

solution1
1 ACCPTED 2021-10-16 00:43:49

solution2
0 2021-10-16 03:32:09