We Keep Coding

How to access an HTML element within a self invoked function.

I am pretty new to JavaScript so I don't know the ins and outs of the language but I do have some knowledge of it. I created a self invoked function that would sort an array of zip-codes and then output it to a div element in the html file.
Unfortunately, the output isn't going into the div element because the function is executed before the html elements is ready, therefor it doesn't exist.
Is there anyway that I could access the div element within the function without having to use Window.Load, etc?
Thank you! click on the link below to view my function.
Screenshot of function

Is there anyway that I could access the div element within the
function without having to use Window.Load, etc?
Just move that code to the end of your html - after elements in question.
For example after </body>

From what I know, you can't access the DOM if it doesn't exist in that moment.
I know I know, don't use window.onload. But I assure you this is different than waiting for the DOM to load and then follow up with your calculations.
You can have a function evaluate something, then actually hang on the result and wait, and then finally fill the innerHTML when the DOMContentLoaded event has fired... or perhaps something of similar flavour, have a look at this.
<script>
const calculations = (function () {
// Super smart calculations...
var output = "Result of smart calculations";
function findWhereOutputGoes() {
return document.getElementById('output-div');
}
return {
output: output,
findWhereOutputGoes: findWhereOutputGoes,
}
})();
document.addEventListener('DOMContentLoaded', function(){ // Fires as soon as DOM has loaded
calculations.findWhereOutputGoes().innerHTML = calculations.output;
});
</script>
<div id="output-div">
</div>

Ajax loaded part of a page - how do I make links in the loaded content work?

I load a part of my basketpage inside an accordion div in my header. This works great and shows my basket in a nice dropdown.
The last problem I need to solve with this is to get the buttons in the loaded content to work. Is it possible to write an callback that make these works? Im not sure even what to google for this one..
This is how the buttons is setup in the loaded content:
checkout
Script Im using to load the content:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox');

use the callback function of .load().
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox', function() {
$("#_ec_oie2").on("click", function() {
if (UI.pb_boolean(this, 'click')) { }
return false;
});
});
checkout

You need to use a child selector for the event. You can attach an event to the .sub-menu element that will fire on the content loaded in through the ajax. Something like the following could work:
$(".dcjqg-accordion ul.sub-menu").on("click", ".action.actionbasket.checkout", function() {
if( UI.pb_boolean(this, 'click') ) {}
return false;
});
Notice the second parameter to the on method. It is a selector that will be used to look at the target of the click event. I used .action.actionbasket.checkout since that is what is on your a tag.
This code may not work exactly, but this should help get you in the right direction.
Here is the link to the jQuery documentation for the on method: https://api.jquery.com/on/

Using jquery from parent in a child iframe

i want to use jquery library in a child iframe. Parent window has included jquery library.
This is the script that included in iframe
$p=parent.window.$;
$p(document).ready(function (){
console.log($p('#bla').val());
console.log($p('#searchedCity').val());
}
);
$p('#bla').val() - this I'm trying to get value of input text field that is located in iframe. Now it returns undefined
$p('#searchedCity').val() - this is value of input text field from parent window. and it returns the right value
when I'm including jquery library directly to the iframe - $('#bla').val() works fine.
what am I missing? Can you help me?

that is because your searching for elements $p('#bla') #bla in parent container. which is not present there..load jquery in current iframe and use $..
$p=parent.window.$;
$p(document).ready(function (){
console.log($('#bla').val());
console.log($p('#searchedCity').val());
}
);
and yes you are calling these function when parent's document is ready which may not work as it should..
$(document).ready(function (){
console.log($('#bla').val());
$p=parent.window.$;
console.log($p('#searchedCity').val());
}
);

I don't know if it does the same but try this :
console.log($('#bla', p).val());
console.log($('#searchedCity', p).val());

Try this:
$p=parent.window.$;
$p(document).ready(function (){
console.log($('#bla').val());
console.log($p('#searchedCity').val());
}
);

How can I stop a JavaScript from executing if an element exists?

I have a Firefox addon that injects/executes a jQuery script on every page at sub.example.com. The script doesn't work on one page of the site, because of bad design. Is there any way to stop the script from being executed if a certain element is located on the page?
EDIT: The script I am using has to be executed before the DOM loads. Is there any way to access the HTML file itself and find out if the element exists?

Since jQuery collections are just beefed up arrays, they each have a length property, which tells you how many elements it has matched:
jQuery(document).ready(function($)
{
if ( $('#someElement').length ) return;
// All of your code should go here...
});

Since you're using jQuery, I assume your script is wrapped in a $(document).ready callback, if so:
$(document).ready(function() {
if ($('#breakOnThisElem').length) {
return;
}
});
If your code isn't wrapped in a function like this: change it! :)

JQuery - Test for a css class element exists. .length doesn't work

I need to check for an element with a css class being in existance on my HTML. I've Googled and searched here, and the common answer is to use .length > 0.
But that doesn't work. I'm getting an "Object expected" error. Any help greatly appreciated.
<script type="text/javascript">
if ($(".deleteLink").length != 0)
{
$(".deleteLink").click(function () { return confirm('some message?'); });
}
</script>
.deleteLink is a css class that belongs to a tag that may or may not be present. I'm getting the error on the conditional part.
Am I missing somethign?? Because it seems that everyone says to use .length...

Checking length is the correct way. There's something else wrong with your code. Did you perhaps forget to include jQuery? Is something clobbering $? Run it in something better than IE to get a more meaningful error message.
Also, a few tips. if ($(...).length) is enough because 0 is falsy, no need for the comparison. Also, you don't need to check if elements exist before manipulating them with jQuery (if it's something lightweight such as just attaching an event handler). Manipulating an empty jQuery result doesn't do anything.

Why this code is ok?
Your script should not throw an error if jQuery is loaded and $ is an alias for it (which is the default).
Also you can simply write:
$(".deleteLink").click(function(){ return confirm('some message?'); });
because the event handler will not be assigned to any element, if the selector does not find any.
Possible problems & solutions
The problem you are facing is one of the following:
the jQuery is not loaded, or
$ is not alias of jQuery.
To solve the first, just load jQuery before this part of the code. To solve the second you can simply use jQuery instead of $.
How to improve the code
One additional possibility is that the element is not available when the code is being executed. If you do not load it dynamically, you can just execute the code when the DOM is ready:
jQuery(function(){
jQuery(".deleteLink").click(function(){ return confirm('some message?'); });
});

This is a summation of the answers you already received.
The tags in your header should look something like this:
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
$(function() {
$(".deleteLink").click(function () { return confirm('some message?'); });
});
</script>
</head>
load the jquery library before you use it
$(function() {}); just guarantees that the script is only ran when your document is ready (the elements are loaded
there is no need for that 'if' statement, if no elements are found, the click event will just attach to no elements.