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="/[email protected]&pd=187&name=kljljl">link</a></p>
<p><a href="/[email protected]&pd=187&name=afdsfsa">link</a></p>
</div>
<div id="list">
kklj
<p><a href="/[email protected]&pd=187&name=4fdaf">link1</a></p>
dll
<p><a href="/[email protected]&pd=187&name=afdsf">link2</a></p>
fdf
<p><a href="/[email protected]&pd=187&name=hgfhd">link3</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=ertewt">link4</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=gfdsg">link7</a></p>
fdasf
<p><a href="/[email protected]&pd=187&name=fdsgfgsg">link3</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=cxvbvcb">link8</a></p>
fdsafd
<p><a href="/[email protected]&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.
CodePudding user response:
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="/[email protected]&pd=187&name=kljljl">link</a></p>
<p><a href="/[email protected]&pd=187&name=afdsfsa">link</a></p>
</div>
<div id="list">
kklj
<p><a href="/[email protected]&pd=187&name=4fdaf">link1</a></p>
dll
<p><a href="/[email protected]&pd=187&name=afdsf">link2</a></p>
fdf
<p><a href="/[email protected]&pd=187&name=hgfhd">link3</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=ertewt">link4</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=gfdsg">link7</a></p>
fdasf
<p><a href="/[email protected]&pd=187&name=fdsgfgsg">link3</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=cxvbvcb">link8</a></p>
fdsafd
<p><a href="/[email protected]&pd=187&name=ujjhgh">link3</a></p>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
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="/[email protected]&pd=187&name=kljljl">link</a></p>
<p><a href="/[email protected]&pd=187&name=afdsfsa">link</a></p>
</div>
<div id="list">
kklj
<p><a href="/[email protected]&pd=187&name=4fdaf">link1</a></p>
dll
<p><a href="/[email protected]&pd=187&name=afdsf">link2</a></p>
fdf
<p><a href="/[email protected]&pd=187&name=hgfhd">link3</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=ertewt">link4</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=gfdsg">link7</a></p>
fdasf
<p><a href="/[email protected]&pd=187&name=fdsgfgsg">link3</a></p>
fdsaf
<p><a href="/[email protected]&pd=187&name=cxvbvcb">link8</a></p>
fdsafd
<p><a href="/[email protected]&pd=187&name=ujjhgh">link3</a></p>
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>