Making scoped functions accessible from a main onload function within the
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
An oversimplified sample of my code:
<head>
<script type="text/javascript">
main();
function main() {
if(document.readyState == 'complete') {
function a() { /*do stuff*/ }
function b() { /*do stuff*/ }
} else {
setTimeout(function() { main(); }, 1000);
}
}
</script>
</head>
<body onload="javascript: main();">
<div onclick="javascript: a();"></div>
<div onclick="javascript: b();"></div>
</body>I am wondering if there is a way for onclick events for a() and b() to be recognised without putting the <script> tag at the end of the document. I know I could do that relatively easily by making variables and functions global, but it's hardly good practice. I could probably utilise closures, but my original code has more functions than 2, and it would be quite a pain.
javascript
asked Jan 4 at 12:06
PyromonkPyromonk
5901719
add a comment |
An oversimplified sample of my code:
<head>
<script type="text/javascript">
main();
function main() {
if(document.readyState == 'complete') {
function a() { /*do stuff*/ }
function b() { /*do stuff*/ }
} else {
setTimeout(function() { main(); }, 1000);
}
}
</script>
</head>
<body onload="javascript: main();">
<div onclick="javascript: a();"></div>
<div onclick="javascript: b();"></div>
</body>I am wondering if there is a way for onclick events for a() and b() to be recognised without putting the <script> tag at the end of the document. I know I could do that relatively easily by making variables and functions global, but it's hardly good practice. I could probably utilise closures, but my original code has more functions than 2, and it would be quite a pain.
javascript
asked Jan 4 at 12:06
PyromonkPyromonk
5901719
add a comment |
An oversimplified sample of my code:
<head>
<script type="text/javascript">
main();
function main() {
if(document.readyState == 'complete') {
function a() { /*do stuff*/ }
function b() { /*do stuff*/ }
} else {
setTimeout(function() { main(); }, 1000);
}
}
</script>
</head>
<body onload="javascript: main();">
<div onclick="javascript: a();"></div>
<div onclick="javascript: b();"></div>
</body>I am wondering if there is a way for onclick events for a() and b() to be recognised without putting the <script> tag at the end of the document. I know I could do that relatively easily by making variables and functions global, but it's hardly good practice. I could probably utilise closures, but my original code has more functions than 2, and it would be quite a pain.
javascript
asked Jan 4 at 12:06
PyromonkPyromonk
5901719
An oversimplified sample of my code:
<head>
<script type="text/javascript">
main();
function main() {
if(document.readyState == 'complete') {
function a() { /*do stuff*/ }
function b() { /*do stuff*/ }
} else {
setTimeout(function() { main(); }, 1000);
}
}
</script>
</head>
<body onload="javascript: main();">
<div onclick="javascript: a();"></div>
<div onclick="javascript: b();"></div>
</body>I am wondering if there is a way for onclick events for a() and b() to be recognised without putting the <script> tag at the end of the document. I know I could do that relatively easily by making variables and functions global, but it's hardly good practice. I could probably utilise closures, but my original code has more functions than 2, and it would be quite a pain.
<head>
<script type="text/javascript">
main();
function main() {
if(document.readyState == 'complete') {
function a() { /*do stuff*/ }
function b() { /*do stuff*/ }
} else {
setTimeout(function() { main(); }, 1000);
}
}
</script>
</head>
<body onload="javascript: main();">
<div onclick="javascript: a();"></div>
<div onclick="javascript: b();"></div>
</body><head>
<script type="text/javascript">
main();
function main() {
if(document.readyState == 'complete') {
function a() { /*do stuff*/ }
function b() { /*do stuff*/ }
} else {
setTimeout(function() { main(); }, 1000);
}
}
</script>
</head>
<body onload="javascript: main();">
<div onclick="javascript: a();"></div>
<div onclick="javascript: b();"></div>
</body>javascript
javascript
asked Jan 4 at 12:06
PyromonkPyromonk
5901719
asked Jan 4 at 12:06
PyromonkPyromonk
5901719
asked Jan 4 at 12:06
PyromonkPyromonk
5901719
asked Jan 4 at 12:06
PyromonkPyromonk
5901719
asked Jan 4 at 12:06
PyromonkPyromonk
5901719
5901719
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
I know I could do that relatively easily by making variables and functions global, but it's hardly good practice.
If you're going to use onxyz-attribute-style event handlers, you have to make those functions accessible globally.
Which is one of the many reasons not to use them.
...without putting the tag at the end of the document.
That's an odd requirement, as that's where the script tag should go.
But you can do it in a couple of ways:
Using the
DOMContentLoadedevent, and hooking up your handlers usingaddEventListenerwithin your event handler for it.Using a
setTimeoutloop to wait for the elements to appear (usually this is a backstop for environments that don't haveDOMContentLoaded, if there are any left).Using event delegation, where you hook the event on
documentordocument.body, then check whether the event travelled through the elements you're interested by looking atevent.targetand its parent elements (or using the relatively-newclosestmethod).
Barring a really good reason for keeping the script in head, your best bet here is:
<head>
</head>
<body>
<div id="divA">divA</div>
<div id="divB">divB</div>
<script type="text/javascript">
main();
function main() {
document.getElementById("divA").addEventListener("click", function a() {
console.log("a click");
});
document.getElementById("divB").addEventListener("click", function b() {
console.log("b click");
});
}
</script>
</body>...where using ids is just an example. In practice, you can often identify the relevant elements via a CSS selector you can use with document.querySelector or document.querySelectorAll.
Side note: You don't use the javascript: pseudo-protocol on onxyz-attribute-style event handlers. (You use it where a URL is expected, such as an href or a bookmark.)
answered Jan 4 at 12:11
T.J. CrowderT.J. Crowder
701k12412471341
Would you please elaborate on points 2 and 3? It would be nice to see some examples. Thank you. The odd requirement is mine. I am crazy and do not like seeing script tags outside of the head. I find the approach lazy and difficult to manage down the road. If I am creating a simple page for laymen to use, they will not be happy about scrolling all the way down to fix settings either.
– Pyromonk
Jan 4 at 12:13
@Pyromonk - All due respect, I strongly suggest reconsidering that viewpoint. It's neither lazy nor hard to manage: Just put them before</body>and they're just as easy to find and manage there. You don't have to "scroll all the way down" on any computer with a key combination for "go to end" (which is all of them). :-) Re elaboration: You can't swing a dead cat on the 'net without examples of #3. #2 is surely self-explanatory?setTimeout(main, 50)wheremainchecks if the document is ready and, if not, does thatsetTimeoutagain.
– T.J. Crowder
Jan 4 at 12:17
Your example is pretty much what my code is at the moment. From my experience, using the javascript protocol is a good practice, as certain mobile devices fail to interpret it properly otherwise. Sure, it's a crutch, and I might be outdated.
– Pyromonk
Jan 4 at 12:18
1
@Pyromonk - Yes, the example is very like your code, intentionally. But thescripttag is in the right place andaandbare still not globals. Rejavascript:- Citation? I flatly guarantee you that there is no mobile browser in use in 2019 (or at any point, frankly) that requires you to havejavascript:ononxyzattribute event handlers. Not even one. You're confusing it withhref.
– T.J. Crowder
Jan 4 at 12:19
I've dealt with an online browser game ~5 years ago where the ctrl+enter functionality did not work for mobile devices due to lack of the javascript protocol mention, but, once again, things develop much faster these days, and I might simply be stuck in my old boots. Thank you very much for your elaborate response and help.
– Pyromonk
Jan 4 at 12:20
add a comment |
Moving the script element won't help.
The a and b functions exist in the scope of the main function and are not accessible outside it.
The onclick functions depend on a and b being globals.
Either make them globals or transform the onclick attributes into JavaScript addEventListener calls (inside the main function).
answered Jan 4 at 12:11
QuentinQuentin
660k748981057
Yes, I apologise for phrasing it poorly. By moving the tag I implied getting rid of the main function and putting everything into global scope.
– Pyromonk
Jan 4 at 12:12
add a comment |
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%2f54038676%2fmaking-scoped-functions-accessible-from-a-main-onload-function-within-the-head%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I know I could do that relatively easily by making variables and functions global, but it's hardly good practice.
If you're going to use onxyz-attribute-style event handlers, you have to make those functions accessible globally.
Which is one of the many reasons not to use them.
...without putting the tag at the end of the document.
That's an odd requirement, as that's where the script tag should go.
But you can do it in a couple of ways:
Using the
DOMContentLoadedevent, and hooking up your handlers usingaddEventListenerwithin your event handler for it.Using a
setTimeoutloop to wait for the elements to appear (usually this is a backstop for environments that don't haveDOMContentLoaded, if there are any left).Using event delegation, where you hook the event on
documentordocument.body, then check whether the event travelled through the elements you're interested by looking atevent.targetand its parent elements (or using the relatively-newclosestmethod).
Barring a really good reason for keeping the script in head, your best bet here is:
<head>
</head>
<body>
<div id="divA">divA</div>
<div id="divB">divB</div>
<script type="text/javascript">
main();
function main() {
document.getElementById("divA").addEventListener("click", function a() {
console.log("a click");
});
document.getElementById("divB").addEventListener("click", function b() {
console.log("b click");
});
}
</script>
</body>...where using ids is just an example. In practice, you can often identify the relevant elements via a CSS selector you can use with document.querySelector or document.querySelectorAll.
Side note: You don't use the javascript: pseudo-protocol on onxyz-attribute-style event handlers. (You use it where a URL is expected, such as an href or a bookmark.)
answered Jan 4 at 12:11
T.J. CrowderT.J. Crowder
701k12412471341
Would you please elaborate on points 2 and 3? It would be nice to see some examples. Thank you. The odd requirement is mine. I am crazy and do not like seeing script tags outside of the head. I find the approach lazy and difficult to manage down the road. If I am creating a simple page for laymen to use, they will not be happy about scrolling all the way down to fix settings either.
– Pyromonk
Jan 4 at 12:13
@Pyromonk - All due respect, I strongly suggest reconsidering that viewpoint. It's neither lazy nor hard to manage: Just put them before</body>and they're just as easy to find and manage there. You don't have to "scroll all the way down" on any computer with a key combination for "go to end" (which is all of them). :-) Re elaboration: You can't swing a dead cat on the 'net without examples of #3. #2 is surely self-explanatory?setTimeout(main, 50)wheremainchecks if the document is ready and, if not, does thatsetTimeoutagain.
– T.J. Crowder
Jan 4 at 12:17
Your example is pretty much what my code is at the moment. From my experience, using the javascript protocol is a good practice, as certain mobile devices fail to interpret it properly otherwise. Sure, it's a crutch, and I might be outdated.
– Pyromonk
Jan 4 at 12:18
1
@Pyromonk - Yes, the example is very like your code, intentionally. But thescripttag is in the right place andaandbare still not globals. Rejavascript:- Citation? I flatly guarantee you that there is no mobile browser in use in 2019 (or at any point, frankly) that requires you to havejavascript:ononxyzattribute event handlers. Not even one. You're confusing it withhref.
– T.J. Crowder
Jan 4 at 12:19
I've dealt with an online browser game ~5 years ago where the ctrl+enter functionality did not work for mobile devices due to lack of the javascript protocol mention, but, once again, things develop much faster these days, and I might simply be stuck in my old boots. Thank you very much for your elaborate response and help.
– Pyromonk
Jan 4 at 12:20
add a comment |
I know I could do that relatively easily by making variables and functions global, but it's hardly good practice.
If you're going to use onxyz-attribute-style event handlers, you have to make those functions accessible globally.
Which is one of the many reasons not to use them.
...without putting the tag at the end of the document.
That's an odd requirement, as that's where the script tag should go.
But you can do it in a couple of ways:
Using the
DOMContentLoadedevent, and hooking up your handlers usingaddEventListenerwithin your event handler for it.Using a
setTimeoutloop to wait for the elements to appear (usually this is a backstop for environments that don't haveDOMContentLoaded, if there are any left).Using event delegation, where you hook the event on
documentordocument.body, then check whether the event travelled through the elements you're interested by looking atevent.targetand its parent elements (or using the relatively-newclosestmethod).
Barring a really good reason for keeping the script in head, your best bet here is:
<head>
</head>
<body>
<div id="divA">divA</div>
<div id="divB">divB</div>
<script type="text/javascript">
main();
function main() {
document.getElementById("divA").addEventListener("click", function a() {
console.log("a click");
});
document.getElementById("divB").addEventListener("click", function b() {
console.log("b click");
});
}
</script>
</body>...where using ids is just an example. In practice, you can often identify the relevant elements via a CSS selector you can use with document.querySelector or document.querySelectorAll.
Side note: You don't use the javascript: pseudo-protocol on onxyz-attribute-style event handlers. (You use it where a URL is expected, such as an href or a bookmark.)
answered Jan 4 at 12:11
T.J. CrowderT.J. Crowder
701k12412471341
Would you please elaborate on points 2 and 3? It would be nice to see some examples. Thank you. The odd requirement is mine. I am crazy and do not like seeing script tags outside of the head. I find the approach lazy and difficult to manage down the road. If I am creating a simple page for laymen to use, they will not be happy about scrolling all the way down to fix settings either.
– Pyromonk
Jan 4 at 12:13
@Pyromonk - All due respect, I strongly suggest reconsidering that viewpoint. It's neither lazy nor hard to manage: Just put them before</body>and they're just as easy to find and manage there. You don't have to "scroll all the way down" on any computer with a key combination for "go to end" (which is all of them). :-) Re elaboration: You can't swing a dead cat on the 'net without examples of #3. #2 is surely self-explanatory?setTimeout(main, 50)wheremainchecks if the document is ready and, if not, does thatsetTimeoutagain.
– T.J. Crowder
Jan 4 at 12:17
Your example is pretty much what my code is at the moment. From my experience, using the javascript protocol is a good practice, as certain mobile devices fail to interpret it properly otherwise. Sure, it's a crutch, and I might be outdated.
– Pyromonk
Jan 4 at 12:18
1
@Pyromonk - Yes, the example is very like your code, intentionally. But thescripttag is in the right place andaandbare still not globals. Rejavascript:- Citation? I flatly guarantee you that there is no mobile browser in use in 2019 (or at any point, frankly) that requires you to havejavascript:ononxyzattribute event handlers. Not even one. You're confusing it withhref.
– T.J. Crowder
Jan 4 at 12:19
I've dealt with an online browser game ~5 years ago where the ctrl+enter functionality did not work for mobile devices due to lack of the javascript protocol mention, but, once again, things develop much faster these days, and I might simply be stuck in my old boots. Thank you very much for your elaborate response and help.
– Pyromonk
Jan 4 at 12:20
add a comment |
I know I could do that relatively easily by making variables and functions global, but it's hardly good practice.
If you're going to use onxyz-attribute-style event handlers, you have to make those functions accessible globally.
Which is one of the many reasons not to use them.
...without putting the tag at the end of the document.
That's an odd requirement, as that's where the script tag should go.
But you can do it in a couple of ways:
Using the
DOMContentLoadedevent, and hooking up your handlers usingaddEventListenerwithin your event handler for it.Using a
setTimeoutloop to wait for the elements to appear (usually this is a backstop for environments that don't haveDOMContentLoaded, if there are any left).Using event delegation, where you hook the event on
documentordocument.body, then check whether the event travelled through the elements you're interested by looking atevent.targetand its parent elements (or using the relatively-newclosestmethod).
Barring a really good reason for keeping the script in head, your best bet here is:
<head>
</head>
<body>
<div id="divA">divA</div>
<div id="divB">divB</div>
<script type="text/javascript">
main();
function main() {
document.getElementById("divA").addEventListener("click", function a() {
console.log("a click");
});
document.getElementById("divB").addEventListener("click", function b() {
console.log("b click");
});
}
</script>
</body>...where using ids is just an example. In practice, you can often identify the relevant elements via a CSS selector you can use with document.querySelector or document.querySelectorAll.
Side note: You don't use the javascript: pseudo-protocol on onxyz-attribute-style event handlers. (You use it where a URL is expected, such as an href or a bookmark.)
answered Jan 4 at 12:11
T.J. CrowderT.J. Crowder
701k12412471341
I know I could do that relatively easily by making variables and functions global, but it's hardly good practice.
If you're going to use onxyz-attribute-style event handlers, you have to make those functions accessible globally.
Which is one of the many reasons not to use them.
...without putting the tag at the end of the document.
That's an odd requirement, as that's where the script tag should go.
But you can do it in a couple of ways:
Using the
DOMContentLoadedevent, and hooking up your handlers usingaddEventListenerwithin your event handler for it.Using a
setTimeoutloop to wait for the elements to appear (usually this is a backstop for environments that don't haveDOMContentLoaded, if there are any left).Using event delegation, where you hook the event on
documentordocument.body, then check whether the event travelled through the elements you're interested by looking atevent.targetand its parent elements (or using the relatively-newclosestmethod).
Barring a really good reason for keeping the script in head, your best bet here is:
<head>
</head>
<body>
<div id="divA">divA</div>
<div id="divB">divB</div>
<script type="text/javascript">
main();
function main() {
document.getElementById("divA").addEventListener("click", function a() {
console.log("a click");
});
document.getElementById("divB").addEventListener("click", function b() {
console.log("b click");
});
}
</script>
</body>...where using ids is just an example. In practice, you can often identify the relevant elements via a CSS selector you can use with document.querySelector or document.querySelectorAll.
Side note: You don't use the javascript: pseudo-protocol on onxyz-attribute-style event handlers. (You use it where a URL is expected, such as an href or a bookmark.)
<head>
</head>
<body>
<div id="divA">divA</div>
<div id="divB">divB</div>
<script type="text/javascript">
main();
function main() {
document.getElementById("divA").addEventListener("click", function a() {
console.log("a click");
});
document.getElementById("divB").addEventListener("click", function b() {
console.log("b click");
});
}
</script>
</body><head>
</head>
<body>
<div id="divA">divA</div>
<div id="divB">divB</div>
<script type="text/javascript">
main();
function main() {
document.getElementById("divA").addEventListener("click", function a() {
console.log("a click");
});
document.getElementById("divB").addEventListener("click", function b() {
console.log("b click");
});
}
</script>
</body>answered Jan 4 at 12:11
T.J. CrowderT.J. Crowder
701k12412471341
edited Jan 4 at 12:15
answered Jan 4 at 12:11
T.J. CrowderT.J. Crowder
701k12412471341
answered Jan 4 at 12:11
T.J. CrowderT.J. Crowder
701k12412471341
answered Jan 4 at 12:11
T.J. CrowderT.J. Crowder
701k12412471341
701k12412471341
Would you please elaborate on points 2 and 3? It would be nice to see some examples. Thank you. The odd requirement is mine. I am crazy and do not like seeing script tags outside of the head. I find the approach lazy and difficult to manage down the road. If I am creating a simple page for laymen to use, they will not be happy about scrolling all the way down to fix settings either.
– Pyromonk
Jan 4 at 12:13
@Pyromonk - All due respect, I strongly suggest reconsidering that viewpoint. It's neither lazy nor hard to manage: Just put them before</body>and they're just as easy to find and manage there. You don't have to "scroll all the way down" on any computer with a key combination for "go to end" (which is all of them). :-) Re elaboration: You can't swing a dead cat on the 'net without examples of #3. #2 is surely self-explanatory?setTimeout(main, 50)wheremainchecks if the document is ready and, if not, does thatsetTimeoutagain.
– T.J. Crowder
Jan 4 at 12:17
Your example is pretty much what my code is at the moment. From my experience, using the javascript protocol is a good practice, as certain mobile devices fail to interpret it properly otherwise. Sure, it's a crutch, and I might be outdated.
– Pyromonk
Jan 4 at 12:18
1
@Pyromonk - Yes, the example is very like your code, intentionally. But thescripttag is in the right place andaandbare still not globals. Rejavascript:- Citation? I flatly guarantee you that there is no mobile browser in use in 2019 (or at any point, frankly) that requires you to havejavascript:ononxyzattribute event handlers. Not even one. You're confusing it withhref.
– T.J. Crowder
Jan 4 at 12:19
I've dealt with an online browser game ~5 years ago where the ctrl+enter functionality did not work for mobile devices due to lack of the javascript protocol mention, but, once again, things develop much faster these days, and I might simply be stuck in my old boots. Thank you very much for your elaborate response and help.
– Pyromonk
Jan 4 at 12:20
add a comment |
Would you please elaborate on points 2 and 3? It would be nice to see some examples. Thank you. The odd requirement is mine. I am crazy and do not like seeing script tags outside of the head. I find the approach lazy and difficult to manage down the road. If I am creating a simple page for laymen to use, they will not be happy about scrolling all the way down to fix settings either.
– Pyromonk
Jan 4 at 12:13
@Pyromonk - All due respect, I strongly suggest reconsidering that viewpoint. It's neither lazy nor hard to manage: Just put them before</body>and they're just as easy to find and manage there. You don't have to "scroll all the way down" on any computer with a key combination for "go to end" (which is all of them). :-) Re elaboration: You can't swing a dead cat on the 'net without examples of #3. #2 is surely self-explanatory?setTimeout(main, 50)wheremainchecks if the document is ready and, if not, does thatsetTimeoutagain.
– T.J. Crowder
Jan 4 at 12:17
Your example is pretty much what my code is at the moment. From my experience, using the javascript protocol is a good practice, as certain mobile devices fail to interpret it properly otherwise. Sure, it's a crutch, and I might be outdated.
– Pyromonk
Jan 4 at 12:18
1
@Pyromonk - Yes, the example is very like your code, intentionally. But thescripttag is in the right place andaandbare still not globals. Rejavascript:- Citation? I flatly guarantee you that there is no mobile browser in use in 2019 (or at any point, frankly) that requires you to havejavascript:ononxyzattribute event handlers. Not even one. You're confusing it withhref.
– T.J. Crowder
Jan 4 at 12:19
I've dealt with an online browser game ~5 years ago where the ctrl+enter functionality did not work for mobile devices due to lack of the javascript protocol mention, but, once again, things develop much faster these days, and I might simply be stuck in my old boots. Thank you very much for your elaborate response and help.
– Pyromonk
Jan 4 at 12:20
Would you please elaborate on points 2 and 3? It would be nice to see some examples. Thank you. The odd requirement is mine. I am crazy and do not like seeing script tags outside of the head. I find the approach lazy and difficult to manage down the road. If I am creating a simple page for laymen to use, they will not be happy about scrolling all the way down to fix settings either.
– Pyromonk
Jan 4 at 12:13
Would you please elaborate on points 2 and 3? It would be nice to see some examples. Thank you. The odd requirement is mine. I am crazy and do not like seeing script tags outside of the head. I find the approach lazy and difficult to manage down the road. If I am creating a simple page for laymen to use, they will not be happy about scrolling all the way down to fix settings either.
– Pyromonk
Jan 4 at 12:13
@Pyromonk - All due respect, I strongly suggest reconsidering that viewpoint. It's neither lazy nor hard to manage: Just put them before
</body> and they're just as easy to find and manage there. You don't have to "scroll all the way down" on any computer with a key combination for "go to end" (which is all of them). :-) Re elaboration: You can't swing a dead cat on the 'net without examples of #3. #2 is surely self-explanatory? setTimeout(main, 50) where main checks if the document is ready and, if not, does that setTimeout again.– T.J. Crowder
Jan 4 at 12:17
@Pyromonk - All due respect, I strongly suggest reconsidering that viewpoint. It's neither lazy nor hard to manage: Just put them before
</body> and they're just as easy to find and manage there. You don't have to "scroll all the way down" on any computer with a key combination for "go to end" (which is all of them). :-) Re elaboration: You can't swing a dead cat on the 'net without examples of #3. #2 is surely self-explanatory? setTimeout(main, 50) where main checks if the document is ready and, if not, does that setTimeout again.– T.J. Crowder
Jan 4 at 12:17
Your example is pretty much what my code is at the moment. From my experience, using the javascript protocol is a good practice, as certain mobile devices fail to interpret it properly otherwise. Sure, it's a crutch, and I might be outdated.
– Pyromonk
Jan 4 at 12:18
Your example is pretty much what my code is at the moment. From my experience, using the javascript protocol is a good practice, as certain mobile devices fail to interpret it properly otherwise. Sure, it's a crutch, and I might be outdated.
– Pyromonk
Jan 4 at 12:18
1
1
@Pyromonk - Yes, the example is very like your code, intentionally. But the
script tag is in the right place and a and b are still not globals. Re javascript: - Citation? I flatly guarantee you that there is no mobile browser in use in 2019 (or at any point, frankly) that requires you to have javascript: on onxyz attribute event handlers. Not even one. You're confusing it with href.– T.J. Crowder
Jan 4 at 12:19
@Pyromonk - Yes, the example is very like your code, intentionally. But the
script tag is in the right place and a and b are still not globals. Re javascript: - Citation? I flatly guarantee you that there is no mobile browser in use in 2019 (or at any point, frankly) that requires you to have javascript: on onxyz attribute event handlers. Not even one. You're confusing it with href.– T.J. Crowder
Jan 4 at 12:19
I've dealt with an online browser game ~5 years ago where the ctrl+enter functionality did not work for mobile devices due to lack of the javascript protocol mention, but, once again, things develop much faster these days, and I might simply be stuck in my old boots. Thank you very much for your elaborate response and help.
– Pyromonk
Jan 4 at 12:20
I've dealt with an online browser game ~5 years ago where the ctrl+enter functionality did not work for mobile devices due to lack of the javascript protocol mention, but, once again, things develop much faster these days, and I might simply be stuck in my old boots. Thank you very much for your elaborate response and help.
– Pyromonk
Jan 4 at 12:20
add a comment |
Moving the script element won't help.
The a and b functions exist in the scope of the main function and are not accessible outside it.
The onclick functions depend on a and b being globals.
Either make them globals or transform the onclick attributes into JavaScript addEventListener calls (inside the main function).
answered Jan 4 at 12:11
QuentinQuentin
660k748981057
Yes, I apologise for phrasing it poorly. By moving the tag I implied getting rid of the main function and putting everything into global scope.
– Pyromonk
Jan 4 at 12:12
add a comment |
Moving the script element won't help.
The a and b functions exist in the scope of the main function and are not accessible outside it.
The onclick functions depend on a and b being globals.
Either make them globals or transform the onclick attributes into JavaScript addEventListener calls (inside the main function).
answered Jan 4 at 12:11
QuentinQuentin
660k748981057
Yes, I apologise for phrasing it poorly. By moving the tag I implied getting rid of the main function and putting everything into global scope.
– Pyromonk
Jan 4 at 12:12
add a comment |
Moving the script element won't help.
The a and b functions exist in the scope of the main function and are not accessible outside it.
The onclick functions depend on a and b being globals.
Either make them globals or transform the onclick attributes into JavaScript addEventListener calls (inside the main function).
answered Jan 4 at 12:11
QuentinQuentin
660k748981057
Moving the script element won't help.
The a and b functions exist in the scope of the main function and are not accessible outside it.
The onclick functions depend on a and b being globals.
Either make them globals or transform the onclick attributes into JavaScript addEventListener calls (inside the main function).
answered Jan 4 at 12:11
QuentinQuentin
660k748981057
answered Jan 4 at 12:11
QuentinQuentin
660k748981057
answered Jan 4 at 12:11
QuentinQuentin
660k748981057
answered Jan 4 at 12:11
QuentinQuentin
660k748981057
660k748981057
Yes, I apologise for phrasing it poorly. By moving the tag I implied getting rid of the main function and putting everything into global scope.
– Pyromonk
Jan 4 at 12:12
add a comment |
Yes, I apologise for phrasing it poorly. By moving the tag I implied getting rid of the main function and putting everything into global scope.
– Pyromonk
Jan 4 at 12:12
Yes, I apologise for phrasing it poorly. By moving the tag I implied getting rid of the main function and putting everything into global scope.
– Pyromonk
Jan 4 at 12:12
Yes, I apologise for phrasing it poorly. By moving the tag I implied getting rid of the main function and putting everything into global scope.
– Pyromonk
Jan 4 at 12:12
add a comment |
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%2f54038676%2fmaking-scoped-functions-accessible-from-a-main-onload-function-within-the-head%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
