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>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>
>Solution :
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'));