We Keep Coding

Waiting for .ready and button click before function

My Google map only shows if function a is document.ready. However, then the function dothis() is called before the user clicks a button which calls function getMyID(inputId).
How do I run my script when the document is ready and a button is clicked?
Here's my code:
function dothis(inputId)
{
if (inputId == "1"){
dlat=30.745271;
dlng=0.578793;
getLocation();
}
else if (inputId == "2"){
dlat=40.836671;
dlng=0.578793;
currentloc();
}
}
$(document).ready(function a() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?key=ALsbSyEQvVel4MCu9xMBvD_92qAuqrFrcnos0dc&libraries=geometry,places&sensor=true&callback=dothis';;
document.body.appendChild(script);
};
$(document).ready(function() { a(); })

Well, why not call a() like
$(document).ready(function() { a(); })
Or if you don't use jquery, then
window.onload = a();
OnLoad works a bit differently though: it doesn't wait for the resources to load (e.g. images) to fire the event. jQuery document-ready event will wait for all the resources to load and then fires the event.

If you want to use jQuery, try it this way :
function dothis() {
...
}
$(document).ready(function() {
$('#MyButton').click(dothis);
}
This way, the button will be associated to the dothis function which can be called once the document is ready ;)

what you want to do is to call window.onload and initialize you button click handler there
eg
function dothis() {
// Do this
}
function getInput(input) {
// Get input
}
function init() {
document.getElementById('mybutton').onclick = getInput
}
window.onload = init

Javascript indexOf condition not behaving as expected

I have a javascript function that runs on window.onload:
if(window.onload) {
var curronload = window.onload;
var newonload = function() {
curronload();
formatICCID_IMEI();
};
window.onload = newonload;
} else {
window.onload = formatICCID_IMEI;
function formatICCID_IMEI() {
var IMEI = $find("<%=cbIMEI.ClientID %>");
alert(IMEI.get_textBoxControl().value);
alert(IMEI.get_textBoxControl().value.indexOf("."));
if (IMEI.get_textBoxControl().value.indexOf(".") > -1) {
alert("Hi!");
}
}
I'm using this more elaborate way of calling my function from this link because if I just use window.onload or document.onload, my control (cbIMEI) is not found. Using this more elaborate method, I don't have that problem. However, my function formatICCID_IMEI is acting strangely. I don't know if it's due to the way I'm calling formatICCID_IMEI, or just something in formatICCID_IMEI that I'm not seeing. If I comment out
if (IMEI.get_textBoxControl().value.indexOf(".") > -1) {
alert("Hi!");
the first and second alerts tell me that
IMEI.get_textBoxControl().value = 351937.04.230880.7
and that
IMEI.get_textBoxControl().value.indexOf = 6
all as expected. HOWEVER, if I comment out the two above alert lines and uncomment the IF condition, the line
alert("Hi!");
never runs. If I uncomment all lines, none of the alerts run. The same behavior holds true if I'm in debug mode. If the condition is uncommented, my cursor never gets to my function at all. What the heck?

You have no close bracket for the if(window.onload) condition - is that intentional?
Since you're using jQuery, why are you not just using the standard $(document).ready stuff?
function formatICCID_IMEI() {
var IMEI = $find("<%=cbIMEI.ClientID %>");
alert(IMEI.get_textBoxControl().value);
alert(IMEI.get_textBoxControl().value.indexOf("."));
if (IMEI.get_textBoxControl().value.indexOf(".") > -1) {
alert("Hi!");
}
}
$(document).ready(formatICCID_IMEI);

window.onload executing before the web is loaded

Im using this code to fire a function right after the page is loaded:
function loadpapi(){
alert("Hello World!");
}
function pctaddLoadEvent(func) {
var oldonload = document.onload;
if (typeof document.onload != 'function') {
document.onload = func;
} else {
document.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
pctaddLoadEvent(loadpapi());
But is starting before the page loads, you can try it here: http://jsfiddle.net/KuTxh/

pctaddLoadEvent(loadpapi());
This code calls loadpapi (just like any other function call) and passes the result to pctaddLoadEvent.
You want to pass the function without calling it.

I changed the event from document.onload to window.onload: see a discussion here.
This document.onload vs window.onload is a complicated subject. It is likely the document.onload event isn't fired by your browser at all. (Or, as one deals with the window and the other with DOM tree, it is possible that the document.onload event has already fired when your javascript function took action - more testing can confirm that.)
Also, the function passed as parameter goes without the (), as you want to pass the function itself, not its returning value.
function loadpapi(){
alert("Hello World!");
}
function pctaddLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
pctaddLoadEvent(loadpapi);
Check demo fiddle: http://jsfiddle.net/st4kQ/

function will not call another function, javascript

For a class project i am trying to count the number of clicks a button gets, save the search term, and then open a new html file. my problem is that the "doCoolThings" function will not call the "newWindow" function. I cannot figure out how to get the newWindow function to execute after i click submit.
here is my code:
window.onload = init;
function init() {
var myButton = document.getElementById("submitButton");
myButton.onclick = doCoolThings;
}
function doCoolThings(){
alert("test count");
localStorage.searchTerms = document.getElementById("searchWord").value;
//var searchOutput = document.getElementById("searchOutput");
searchWord.innerHTML = searchTerms;
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
//window.open("scroogleresults.html");
}
else
{
localStorage.clickcount=1;
//window.location="scroogleresults.html";
}
var myCounter = document.getElementById("numberClicks");
var counter = localStorage.clickcount;
myCounter.innerHTML = counter;
newWindow();
}
function newWindow(){
alert("new window");
window.open("scroogleresults.html");
}

If this is the extent of your code, it looks to me like you have some javascript errors. You should be checking the error console or debug console in your browser for javascript errors that cause your scripts to abort. Here are a couple errors I see:
Error #1
In doCoolThings(), when you do this:
searchWord.innerHTML = searchTerms;
I don't see any place that searchTerms is defined so this would generate a script error.
Error #2
You should be using getItem() and setItem() to access localStorage.

Function called in window.onload does not recognize element

I am a bit confused here. I thought that the function specified in window.onload did not execute before the page was loaded. Nervertheless, I get an error in the below code (heres the jsfiddle version):
<script>
function updateImage(url){
document.getElementById("foo").src = url;
}
window.onload = updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
</script>
<img id="foo" alt="" src="http://dummyimage.com/100x100/000/fff.png&text=bar" />
It gives me:
Error: document.getElementById("foo") is null
When moving the image above the script all works well.

window.onload expects to be a function - which it will call when the page is loaded. But what you've assigned to it is not a function. You assigned
updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
which immediately executes the updateImage function, and since you don't have a return statement in the body of updateImage, the return value is undefined. Therefore, at the end, window.onload has the value undefined.
A solution would be to change that bit of code to:
window.onload = function(){
updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
}
This will cause it to call the function when the window has been loaded and do what you'd expect.

You can use trigger that will check is element loaded.
<script>
function updateImage(url){
document.getElementById("foo").src = url;
}
function initOnLoad(sElementName) {
var oElement = (sElementName == "body") ? document[sElementName] : document.getElementById(sElementName);
if(oElement != null && typeof(oElement) != "undefined") {
updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
}
else {
setTimeout(function() {
initOnLoad(sElementName);
}, 0);
}
}
initOnLoad('body');
</script>
<img id="foo" alt="" src="http://dummyimage.com/100x100/000/fff.png&text=bar" />

You have an error in your code.
window.onload = updateImage("...");
You are not assigning a function handler to the window onload. You are assigning the RESULT of the updateImage function. Which is executed immediately before image is loaded or even added to the DOM. To assign function handler you need:
window.onload = updateImage;
or
window.onload = function(){
updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
}
or by using jQuery
$(document).ready(function(){
updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
});