Ok so my index page has this header with the login option and i selected the buttons using these two functions
function getHeaderButtons() {
const showHidePopUp = document.querySelector('.titleAndMenuIcon > img')
const windowPopUP = document.querySelector('.mobilePopUp')
const main = document.querySelector('main')
showHidePopUp.addEventListener('click', () => {
windowPopUP.classList.toggle('moveUpAndDown')
console.log('ok')
})
}
function getLoginAndSubscribeButtons() {
const login = document.querySelector('.mobilePopUp__login')
const subscribe = document.querySelector('.mobilePopUp__subscribe')
login.addEventListener('click', () => {
window.location.href = "./src/pages/loginPage.html"
})
subscribe.addEventListener('click', () => {
window.location.href = './src/pages/subscribePage.html'
})
}
and these are working perfectly fine in my HOME PAGE, the problem begins when i export these functions to other pages (so i don't have to rewrite 'em all over again)
This is the message that is shown enter image description here
i wanted a manner to, even the subscribe button is clicked within the subscribe page it redirects again to the subscribe page. Is there a manner to do that?
I tried to look into an wildcard that represents the home page so it could alawys refers to my index page
CodePudding user response:
use absolute path
/src/pages/loginPage.html
CodePudding user response:
Problem: You are using a relative path, which means that the file URL will be based on the CURRENT location.
RELATIVE Example:
CURRENT PAGE: domain.com/index.html
window.location.href = "./src/pages/loginPage.html"
FINAL URL: /src/pages/loignPage.html
CURRENT PAGE: domain.com/blogs/pets.html
window.location.href = "./src/pages/loginPage.html"
FINAL URL: /blogs/src/pages/loignPage.html
Solution: Use an absoulte path, that way the current file location doesn't matter and the file URL will remain the same.
window.location.href = "/src/pages/loginPage.html"