To make it simple, i have a menu that contains the items "W", "X", "Y" and "Z". Each item redirects to a different page on the website, regardless of the user. But i want item "Z" specifically to redirect to a different page depending on the user. For example, if user "1" clicks on "Z", then he will be redirected to the page example.com/z1. If it is user "2" who clicks on "Z", then he will be redirected to example.com/z2. And so forth.
Something like:
if user = user1, then button_Z = <p><a href="http://reddit.com/">Z</a></p>
if user = user2, then button_Z = <p><a href="http://youtube.com/">Z</a></p>
User1 is redirected to reddit, while user2 is redirected to YouTube.
It looks like you're wanting to do some pretty simple string concatenation in the url. Here's a simple example that show what it sounds like you're trying to achieve. Most likely you're going to want to get these variables out of the global scope and accept them as parameters for your functions or use some sort of state management.
let user = ''
document.querySelector('#username').addEventListener('change',updateUser)
function updateUser(e) {
user = e.target.value
}
document.querySelector('#dropdown').addEventListener('change',redirect)
function redirect(e) {
const selection = e.target.value;
if (selection === 'Z') {
console.log(`mywebsite.com/${selection}${user}`)
// window.location.replace(`mywebsite.com/${selection}${user}`)
} else {
console.log(`mywebsite.com/${selection}`)
// window.location.replace(`mywebsite.com/${selection}`)
}
}<input id="username" />
<select id="dropdown">
<option>W</option>
<option>X</option>
<option>Y</option>
<option>Z</option>
</select>