For my new project, I am trying to pass a link in a variable. I have buttons (multiple buttons let's say 50 buttons). So what it has to do is on button 1 click it should pass to var link = button1link.html and on button 2 click it should pass a variable to var link = button2link.html. making a specific function to each button is quite a long process so, In short, a specific button click should pass a specific link to var link . please help me out with it. Thanks :D
<button id="button1" onclick= "seturl();">click here </button>
var link = "linkOfButton1.html"
You can put links into a data attribute of the button.
And add each click listeners by looping through the buttons.
let link
Array.from(document.querySelectorAll('button')).forEach(btn => {
btn.addEventListener('click', () => {
link = btn.dataset.link
console.log(link)
})
})<button data-link="button1link.html">button1</button>
<button data-link="button2link.html">button2</button>Use a loop to set the links, location.href to forward the user to the specific page and also create the buttons (if they should be dynamic).
const links = ['https://example.com', 'https://google.com', 'https://stackoverflow.com'];
for (let link of links) {
const button = document.createElement('button');
button.innerText = 'Click here';
document.body.append(button);
button.addEventListener('click', () => {
window.location.href = link;
});
}Pass the venet to your seturl() and then you can make the link.
function seturl(e) {
const id = e.target.getAttribute('id');
const name = id[0].toUpperCase() + id.slice(1);
let link = "linkOf" + name +".html";
alert(link);
}<button id="button1" onclick= "seturl(event);">click here 1</button>
<button id="button2" onclick= "seturl(event);">click here 2</button>