how can i change title and url in script by click on post

i used wordpress and want to click on post in archive page change on script <a href="link1" id="shareBtn"> title1 </a> <a href="link2" id="shareBtn"> title2 </a> <a href="link3" id="shareBtn"> title3 </a> <a href="link4" id="shareBtn"> title4 </a> <a href="link5" id="shareBtn"> title5 </a> Run code snippetExpand snippet i want when click at links change script source <script> document.querySelector('#shareBtn') .addEventListener('click', event => { if (navigator.share) { navigator.share({ // web share dialog //change this title title: 'GeeksForGeeks', //change this url url: 'https://geeksforgeeks.org' }).then(() => { console.log('Thanks for sharing!'); }).catch(err => { // Handle errors, if occurred console.log( "Error while using Web share API:"); console.log(err); }); } else { // Alerts user if API not available alert("Browser doesn't support this API !"); } }) </script> Run code snippetExpand snippet

You can't have same ID for multiple elements. After having different id for each, you may try this: function share(linkId) { const linkElement = document.getElementById(linkId); if (navigator.share) { navigator.share({ title: linkElement.textContent, url: linkElement.href }).then(() => { console.log('Thanks for sharing!'); }).catch(err => { console.log("Error while using Web share API:"); console.log(err); }); } else { alert("Browser doesn't support this API!"); } } document.getElementById('shareBtn1').addEventListener('click', () => share('shareBtn1')); document.getElementById('shareBtn2').addEventListener('click', () => share('shareBtn2')); document.getElementById('shareBtn3').addEventListener('click', () => share('shareBtn3')); document.getElementById('shareBtn4').addEventListener('click', () => share('shareBtn4')); document.getElementById('shareBtn5').addEventListener('click', () => share('shareBtn5'));

February 4, 2024