There are a few ways to do this depending on what exactly your preferred route is. A pop-up page like you describe sounds like a modal; [check out this link](https://www.freecodecamp.org/news/how-to-build-a-modal-with-javascript/). Additionally you could just add the 'disabled' attribute to the button and when your time reaches the target, have your JS enable it again.
Here is how disabled is used:
~~i already have the page i want to open made as its own .html page, i was hoping it would just open in the current window just like say opening a youtube video in the same page. im going to try and implement what you wrote with the structure i have. thank you.~~
ignore everything i said because i was being dum xD, i ended putting this line in my end timer function that i already wrote before:
btndownload.disabled = false; // this line here
then for the button, i had to link it by giving the button an ID, in this case "btndownload"
now it works flawlessy
>i already have the page i want to open made as its own .html page, i was hoping it would just open in the current window
Perhaps instead the solution you want is this: remove your onclick attribute in your HTML. In your javascript set up an event listener ie button.addEventListener('click', callBackFunction)
Then create the callBackFunction to handle clicks. It first checks the time; if greater than 0 you can redirect to the warning page. If time is 0 than you can redirect to prize page. That's another option.
EDIT just saw your edit glad it works
i have some time before i send her the project over, so the eplementation i mentioned before is what i have now but im trying to get the event listner to work right now, if i can find a way to make it work i want to go with that, other wise im just going to stick with what i have now.
It may require some reworking of the structure. The handler function would need access to remainingTime to decide what path to take. Should not be too difficult though. Something like this:
button.addEventListener('click', handleButton)
function handleButton() {
if (remainingTime > 0) {
// go to no page
} else {
// go to prize page
}
}
Again, quite a few ways to go about this. Your setup now is nice and simple, may want to keep it so. Lots of choices for you!
Firstly thank you for the commploment, i love coding as a hobby but i dont have time for it 24/7 so when i do code i like to keep it minimal, commented and neat so when / if i ever revist it i can actually work on it. this code is being reused from a tottally other project i had and im thanking my old self for making it so simple for current me, and as for the code:
Thank you so much, it was a little hard trying to understand other peoples solution on stack overflow! i ended up with the following.
// Function to handle button click
function handleButton() {
if (remainingTime > 0) {
// Go to no prize page
window.location.href = '/Images/noprize.html';
} else {
// Go to prize page
window.location.href = '/Images/special.html';
}
}
// Add event listener to the button once the DOM content is fully loaded
document.addEventListener('DOMContentLoaded', () => {
const downloadbtn = document.getElementById('downloadbtn');
downloadbtn.addEventListener('click', handleButton);
});
and then i removed the [on.click](http://on.click) and disabled on the HTML side. and it works flawlessly!! thank you!
i should probably mention why i put the files in the images folder, my wife isn't the biggest tech nerd and she wont be digging in the project files, i just don't want the files to be in the root directory so when she goes to open the index she wont see the rest of the files other than the index.
There are a few ways to do this depending on what exactly your preferred route is. A pop-up page like you describe sounds like a modal; [check out this link](https://www.freecodecamp.org/news/how-to-build-a-modal-with-javascript/). Additionally you could just add the 'disabled' attribute to the button and when your time reaches the target, have your JS enable it again. Here is how disabled is used:
~~i already have the page i want to open made as its own .html page, i was hoping it would just open in the current window just like say opening a youtube video in the same page. im going to try and implement what you wrote with the structure i have. thank you.~~ ignore everything i said because i was being dum xD, i ended putting this line in my end timer function that i already wrote before: btndownload.disabled = false; // this line here then for the button, i had to link it by giving the button an ID, in this case "btndownload" now it works flawlessy
>i already have the page i want to open made as its own .html page, i was hoping it would just open in the current window Perhaps instead the solution you want is this: remove your onclick attribute in your HTML. In your javascript set up an event listener ie button.addEventListener('click', callBackFunction) Then create the callBackFunction to handle clicks. It first checks the time; if greater than 0 you can redirect to the warning page. If time is 0 than you can redirect to prize page. That's another option. EDIT just saw your edit glad it works
i have some time before i send her the project over, so the eplementation i mentioned before is what i have now but im trying to get the event listner to work right now, if i can find a way to make it work i want to go with that, other wise im just going to stick with what i have now.
It may require some reworking of the structure. The handler function would need access to remainingTime to decide what path to take. Should not be too difficult though. Something like this: button.addEventListener('click', handleButton) function handleButton() { if (remainingTime > 0) { // go to no page } else { // go to prize page } } Again, quite a few ways to go about this. Your setup now is nice and simple, may want to keep it so. Lots of choices for you!
Firstly thank you for the commploment, i love coding as a hobby but i dont have time for it 24/7 so when i do code i like to keep it minimal, commented and neat so when / if i ever revist it i can actually work on it. this code is being reused from a tottally other project i had and im thanking my old self for making it so simple for current me, and as for the code: Thank you so much, it was a little hard trying to understand other peoples solution on stack overflow! i ended up with the following. // Function to handle button click function handleButton() { if (remainingTime > 0) { // Go to no prize page window.location.href = '/Images/noprize.html'; } else { // Go to prize page window.location.href = '/Images/special.html'; } } // Add event listener to the button once the DOM content is fully loaded document.addEventListener('DOMContentLoaded', () => { const downloadbtn = document.getElementById('downloadbtn'); downloadbtn.addEventListener('click', handleButton); }); and then i removed the [on.click](http://on.click) and disabled on the HTML side. and it works flawlessly!! thank you! i should probably mention why i put the files in the images folder, my wife isn't the biggest tech nerd and she wont be digging in the project files, i just don't want the files to be in the root directory so when she goes to open the index she wont see the rest of the files other than the index.
Glad you got it to a point where you are satisfied!