Pfthb

I'm running into a weird issue where my navigation logic is logging a "MouseEvent" (in Chrome Dev Tools) when I click a button. The expected result is to navigate to the appropriate page via the button's data-url (but I'm just logging it for now while debugging).

I can't use ES2015 syntax (using default parameters) due to this being a legacy code base and has to work in non-modern (IE) browsers, hence the Babel.js-ified vars in the function declaration.

Note: The vars in the function are identical with the exception of their respective index (0 and 1). They also need to remain because I'm calling this function elsewhere on the site and don't want to pass arguments every time.

Here's a watered-down code sample, but view the Fiddle to see the log in action.

HTML:

<p>Activate User?</p>
<input type="button" value="Continue" class="js-button" data-url="/success.htm"/>
<input type="button" value="Back" class="js-button" data-url="/index.htm"/>

JS:

// Buttons array
var inputButtons = document.getElementsByClassName('js-button');

// Listen for button click and navigate according to data-url
for (var i = 0; i < inputButtons.length; i++) 
 inputButtons[i].addEventListener('click', navigateToPage, false);


// Navigate by grabbing URL from clicked button
function navigateToPage() 
 var _pageURL = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.getAttribute('data-url');
 var _altURL = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getAttribute('data-url');

 // this doesn't work
 console.log('First console.log: ', _pageURL);

 // but this does
 console.log('Second console.log: ', _altURL);

 // Why? I don't even know what's going on here.

Any idea why I'm getting this different behavior? I don't know why the first var logs this "MouseEvent" (again, in Chrome Dev Tools), but not the second.

Any help would be appreciated. Thanks!