Strange button behavior

[WebSteve]

In an external js file, I have code for these two Go-To-Home buttons.
One for …/index.html and the other for …/…/index.html
Several pages will link to it:

const btnReturnToHome = document.getElementById("returnToHome");
function returnToHome(){
	console.log("go to Home");
window.location=("../index.html");
}
btnReturnToHome.addEventListener('click', returnToHome);

const btnReturnToHome2 = document.getElementById("returnToHome2");
function returnToHome2(){
	console.log("go to Home2");
window.location=("../../index.html");
}
btnReturnToHome2.addEventListener('click', returnToHome2);

Is it OK to have the code like this? The buttons, if put on the same html page, will work:

<input id="returnToHome" type="button" value="Home" class="buttonSetup">
<input id="returnToHome2" type="button" value="Home2" class="buttonSetup">

Both of these buttons will work, taking me back.
But if I use only one button, then the remaining button will not work. Nothing happens on click.
When I keep both, but put a style display:none on one, then the other works:

<span style="display:none"><input id="returnToHome" type="button" value="Home" class="buttonSetup"></span>
 <input id="returnToHome2" type="button" value="Home2" class="buttonSetup">

This display:none workaround is a hack.
What’s the right way to code these in the external file?
Above both of those scripts is a (working) Return-To-Top button script. Not sure if it is the cause of the confusing behavior:

const buttons = document.querySelectorAll('.returnToTopC');
function returnToTopC() {
  window.location.assign("#top");
}
buttons.forEach((button) => {
  button.addEventListener('click', returnToTopC);
});

[Archibald]

If a button does not exist document.getElementById() will return false. The addEventListener() will then fail.

Use:
if(btnReturnToHome) btnReturnToHome.addEventListener('click', returnToHome);
and
if(btnReturnToHome2) btnReturnToHome2.addEventListener('click', returnToHome2);

[DaveMaxwell]

Like @Archibald says, it’s because the button doesn’t exist. When it hits that line of code, the JavaScript will fail because the object doesn’t exist to add the listener to. Let me guess, you removed btnReturnToHome and tried to use just btnReturnToHome2?

The if (btnReturnToHome) check in the code he provides checks for the existence of an object prior to trying to do something with it.

[Gandalf]

Isn’t this what <a href="..."> was designed for? What happens if the visitor has JS switched off?

[WebSteve]

What you’re saying @DaveMaxwell what you’re saying is that if the button isn’t there, then ALL the rest of the JavaScript fails on the page. Ouch. I get it now. That explains why moving a bit of code from below those lines to above had it working again.

[WebSteve]

@Gandalf I happened to have used an input button in this case, so I needed JS to make it work. You’re right; that would have been an easier way and saved more time. <a href=""><button>

But the gift in the end was learning a little bit more JS!

[WebSteve]

@Archibald I dimly knew there was an if exist, but didn’t know how to execute it in my case. Thanks.

[DaveMaxwell]

@WebSteve

What you’re saying @DaveMaxwell what you’re saying is that if the button isn’t there, then ALL the rest of the JavaScript fails on the page. Ouch. I get it now. That explains why moving a bit of code from below those lines to above had it working again.

Not quite…since it’s not compiled, JS stops processing on the first error, but will run everything up to that point will run.

So if you were to remove ReturntoHome2, the JS for ReturntoHome will still work because that block of code hasn’t been executed yet. When you removed ReturnToHome, the JS for ReturntoHome2 doesn’t get executed because the JS for ReturntoHome has executed and failed.

Here’s an example based off your initial code earlier. Click on the three buttons and see how they behave.

[WebSteve]

I don’t see anything happening when I click on the buttons. The alerts don’t appear and the screen doesn’t change. (Not in FF, not in Chrome.)

I notice that in the html, you have …Home2a instead of …Home2

Thanks for taking the extra time to help me understand.

[DaveMaxwell]

@WebSteve

I don’t see anything happening when I click on the buttons. The alerts don’t appear and the screen doesn’t change. (Not in FF, not in Chrome.)

I notice that in the html, you have …Home2a instead of …Home2

The 2a was intentional to cause the JS to break…
Yeah, it’s odd. Sometimes it works but other times it doesn’t. What’s supposed to happen is the first button is supposed to fire the alert but the other two don’t. Dunno if it’s because it’s on codepen or what the deal is, but that was the intent (and it was doing it earlier when I linked it)

[WebSteve]

I clicked through to Codepen and saw what you meant. I also cut/pasted button 2 in JS to the end and buttons 1 and 3 worked.

Lesson learned: errors earlier on can cause the later code to not run.

[rpg_digital]

@DaveMaxwell

Yeah, it’s odd. Sometimes it works but other times it doesn’t. What’s supposed to happen is the first button is supposed to fire the alert but the other two don’t. Dunno if it’s because it’s on codepen or what the deal is, but that was the intent (and it was doing it earlier when I linked it)

It throws the following console error when viewing outside of codepen.
Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set.

The second answer down in this link seems to cover it, and has something to do with iframes and needing to configure ‘allow modals’. How you do that in codepen I don’t know.
https://stackoverflow.com/questions/32119446/ignored-call-to-alert-the-document-is-sandboxed-and-the-allow-modals-key