Navigate on Button Click Failing with First Default Parameter due to MouseEvent
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!
javascript mouseevent babeljs default-parameters
asked Nov 13 '18 at 17:11
ScottScott
7751018
add a comment |
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!
javascript mouseevent babeljs default-parameters
asked Nov 13 '18 at 17:11
ScottScott
7751018
add a comment |
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!
javascript mouseevent babeljs default-parameters
asked Nov 13 '18 at 17:11
ScottScott
7751018
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!
javascript mouseevent babeljs default-parameters
javascript mouseevent babeljs default-parameters
asked Nov 13 '18 at 17:11
ScottScott
7751018
asked Nov 13 '18 at 17:11
ScottScott
7751018
asked Nov 13 '18 at 17:11
ScottScott
7751018
asked Nov 13 '18 at 17:11
ScottScott
7751018
asked Nov 13 '18 at 17:11
ScottScott
7751018
7751018
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53286281%2fnavigate-on-button-click-failing-with-first-default-parameter-due-to-mouseevent%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53286281%2fnavigate-on-button-click-failing-with-first-default-parameter-due-to-mouseevent%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
