We Keep Coding

why are some variables not defining?

I feel new to javascript asking this and am absolutely stumped here. No idea why and trying to figure out for many many hours, but if, for example, I have this line in my script:
var listen = document.getElementsByClassName('test_this')[0];
On my local machine, when I type 'listen' into the console, it returns undefined, but if I manually type this into the console then it works. For example:
the HTML:
<p class='test_this'>hi</p>
the JS:
var listen = document.getElementsByClassName('test_this')[0];
listen.addEventListener("click", function onclick(event) {
alert('hi');
});
function testZis() {
alert('test worked');
}
alert('saysHiAnyway');
Codepen URL: https://codepen.io/anon/pen/pqZNVR
If I load the codePen URL, I get the correct alert, but on my local machine in my browser, I just get this error: Cannot read property 'addEventListener' of undefined and no alert - presumably because, for some unknown reason, the var listen declaration line isn't working.
Can someone explain what on earth is going on here? I'd be really appreciative. I have a feeling it's something unbelievably simple, yet it seems so difficult to identify. Thanks for any help.

You have a couple of options here to fix this:
Place your <script> tags below all of your HTML code, right above the closing </body> tag.
The alternative would be to wrap all of your code within a window.onload event handler like so:
window.onload = function() {
//All of your code goes here
}

Two scripts won't work at the same time

There is probably a very simple explanation for this (and likely a much cleaner way to do it), but I'm new and can't quite figure it out. Any assistance would help the learning process...
I have one script that displays one div or another based (show instead of hide) on what a user selects from a dropdown list. Like so:
var PickDiv = (function(){
var _obj = {};
var hideShow = function(elem){
if($(elem).val() === '1'){
$("#slider_action").show();
$("#slider_dollar").hide();
}else if($(elem).val() === '2'){
$("#slider_dollar").show();
$("#slider_action").hide();
}else{
$("#slider_dollar, #slider_action").hide();
}
};
_obj.checkValue = function(){
hideShow($('#build_opt'))
};
var events = function(){
$('#build_opt').change(function(){
hideShow(this);
});
};
$(document).ready(function(){
events ();
checkValue ();
});
return _obj;
}());
This works great and displays the right div based on what is selected from the dropdown. I thought I could reuse this same idea later in my code to have the same effect. Once the div is displayed (after making a selection related to script above), I need to provide another dropdown with additional options. The user will select one of these and then a div will display. So, I figured, I could use something like this:
var RunRate = (function(){
var _obj2 = {};
var hideShow_2 = function(elem_2){
if($(elem_2).val() === '6'){
$("#db_sign").show();
$("#app_down", "#in_redem", "#site_vis", "#cont_ent" ).hide();
}else if($(elem_2).val() === '7'){
$("#app_down").show();
else{
$("#app_down", "#in_redem", "#site_vis", "#db_sign", "#cont_ent" ).hide();
}
};
_obj2.checkValue_2 = function(){
hideShow_2($('#action_type_2'))
};
var events_2 = function(){
$('#action_type_2').change(function(){
hideShow_2(this);
});
};
$(document).ready(function(){
events_2 ();
checkValue_2 ();
});
return _obj2;
}());
Of course, this doesn't work. I tried a number of different things with no luck. Note that if I exclude the first script from my code, the second script works fine, so I know it works. I'm guessing it has something to do with the two scripts sharing a variable or something about jquery that I'm clearly missing.
Any help would be appreciated. Overall, looking to be able to do a number of these types of dependent dropdowns without interfering with one another.
Thanks for your help!
UPDATE:
Note that if in the second script, I replace:
$(document).ready(function(){
with
$( window ).load(function() {
then the problem is solved. So, clearly the problem is related to the document.ready interfering with each other, but I don't know how to fix this without this "hack" above especially if I want to use more of these dependent dropdowns. Is there a way to pass a different variable and call that instead of document?
UPDATE 2
Figured out the problem...my original code was throwing an error due to an undefined reference (checkValue). That error was causing the document ready to not work in the second function. Referenced a more detailed explanation in my answer below.

Figured out the problem thanks to this answer to a related question pointed out by #skmasq. #JustinWood was onto something with his comment on my original question. Turns out that my scripts were throwing an error ("Uncaught ReferenceError: checkValue is not defined"), which was not allowing the document ready function to work properly.
Here's the critical part of the answer :
It is important to note that each jQuery() call must actually return. If an exception is thrown in one, subsequent (unrelated) calls will never be executed.
This applies regardless of syntax. You can use jQuery(), jQuery(function() {}), $(document).ready(), whatever you like, the behavior is the same. If an early one fails, subsequent blocks will never be run.

Could be that $(document).ready() overwrites the initial job? It doesn't matter if you use different functions/variable names ...$(document).ready is the same ...

Javascript not storing variables at all. Every variable "undefined"

I was wondering if anyone could help me. The problem is javascript isn't storing any variables and is acting up.
<script type="text/javascript" language="javascript">
var name = document.getElementById('text_field').value;
var test = "foobar";
function test_function(){
alert("hello"+test);
}
alert('test '+test);
</script>
The second alert doesnt happen at all, and when i click on the button to trigger the test_function() it alerts out "helloundefined" .
I just don't know what to do, it was working fine then all of a sudden it stopped. I should mention that this is on a php page but that shouldn't make a difference.

If there is no element with the ID text_field, the rest of the code will not run.

try changing:
var name = document.getElementById('text_field').value;
to
var name = document.getElementById('text_field').value || "some default value;
OR
var name;
if(document.getElementById('text_field')) {
name = document.getElementById('text_field').value
} else {
name = "some value"
}

Without seeing the rest of the code, most likely the culprit is this line:
var name = document.getElementById('text_field').value;
If the script block is run before 'text_field' exists, you get an error and the rest of the javascript doesn't execute. The result is that you don't see the alert, and the test variable is never set. You need to call the code after the DOM exists, either by running it in onload (or a ready function in jQuery) or by putting the script block at the end of the page.

Move that script block to bottom of the page. text_field does not exist yet. If you're debugging in a browser, use Chrome or Firefox and make use of the "Console" window in the dev tool bar. It'll tell you things like this...

jQuery unload(): Syntax error after updating a Cookie - how to find the cause?

Solution below: Edit #2
I've a HTML-list the user is able to sort. I don't want to save the data after every drag/drop action, so I save the data on unload: in a cookie and database. Thats working, but:
After saving the data the list is hidden and I get a "syntax error" in this line:
<!DOCTYPE html>
It's strange because everything works fine after refreshing the same page (F5) without changing anything.
I try to find the cause but no success. That's the flow:
1. visit the page (index.php)
2. change the list (set: list_is_dirty = true)
3. click any internal link (call $(window).unload( ... save_data() ... )
4. target page appears without the list (syntax error!)
5. refreshing the page (everything works fine)
Do you have any idea how to find this error? Any tools or strategies? Or maybe the same experience with the unload function?
Thanks in advance!
Edit:
Some code:
var list_is_dirty = false;
// document ready?
$(function() {
function sort_list() {
// some code, not important
}
sort_list();
$(window).unload(function() {
if (list_is_dirty == true) {
/* ---------- HERE's the error! ---------- */
/* The error occures when I try to call the script.php
I tried load(), $.post(), $.get() but nothing works.
The string is correct. I'm not even able to call any of
these functions without params.
*/
// send data to script.php to save data
$("#div").load("script.php?str="+list_data_str);
$.cookie("list_data", list_data_str);
}
});
}
Edit #2 / Solution:
I don't know why, but everything works with window.onbeforeunload instead of jQuery.unload(). An explaination would be great! I'm sorry for this confusing thread!
window.onbeforeunload = function(e) {
$("#div").load("script.php");
}

I think that your issue is with: list_data_str as it's not defined anywhere.
if you are trying to say that you want to do AJAX post for example, then obviously you need to look for success event
else it appears that what your demo code is missing something because you can do it the way you are trying if at the receiving script you use $_GET over the URL and not pay attention to any parameters.. In other words, you are missing the object and when you refresh the page it's loaded into the DOM. Apparently that could be the issue that you are describing, I would suggest that you post a bit more of relevant to your issue code.. like the receiving script or any errors from a debugger like Firebug.
Regarding how to test it, you might want to use console.log in supported browsers or simply alert when is setting up the cookie.
var global list_is_dirty = false;
function sort_list(list, list_is_dirty) {
// some code, not important
//check the list and the flag
//you should return a value, else it does not make sense to use a function here.. note the var defined as global
return list; //?? not sure what to return as don't know what this code does from the posting
}
jQuery(function($)
{
$(window).load(function(e){
var list_data_str= sort_list( );
// send data to script.php to save data
e("#div").load('script.php?str='+list_data_str);
//on unload destroy the cookie perhaps?? or if it's not set a session variable
e.cookie("list_data", list_data_str);
...
The unload event
$(window).unload(function(e) {
$("#div").load("script.php?str="+list_data_str);
$.cookie("list_data", list_data_str);
}
});
}
....
// About your EDIT: Are you passing in here any parameters to the script? Because I think the problem is at that logic.
window.onbeforeunload = function(e) {
$("#div").load("script.php");

Javascript windows.location, skipping

I have been having a strange problem with an external javascript file function skipping over windows.location. my program was supposed to take in information from forms then create validate it and after it was validated send it to a php file with get.
I simplified my code to look like
function validation(){
var alerting;//receives from forms commented out
alerting="";
var url="phpadd.php";//after this i would validate it and create the alert but all of that is commented out and irrelevant
if(alerting==""||alerting==null)
{
windows.location=url;
}
else
{
alert(alerting);
}
}
and it didn't work.
Here is the real funny thing
when I include an alert at the end after windows.location it calls the php file. When I don't it doesn't.
for instance
function validation(){
var alerting;//receives from forms commented out
alerting="";
var url="phpadd.php";//after this i would validate it and create the alert but all of that is commented out and irrelevant
if(alerting==""||alerting==null)
{//I also create the code here to put values In the url but I commented them all out so this is my effective code.
windows.location=url;
alert(url);
}
else
{
alert(alerting);
}
}
works but it has to print out the alert first. On the other hand when I don't have an alert after the windows.location call It doesn't work at all.(and I know it works with the alert because It is then redirected to the php file which I know works too). It doesn't have to be alert(url) either It could be alert anything really. in fact it did work with a while(1) loop done afterward but almost crashed the browser first. It's like it is leaving the function before it does what it is supposed to and forgetting about it.
I have tried it in firefox and in google chrome without either way working.
also if you can't find a way to do this. if you could give me a way to take in values from a form to javascript and then send valid values to a php file without windows.location(i've tried every other variant I have found also like: windows.location.href location.href location.assign(url))
I would appreciate it.
by the way The code I left out is not causing the problem because it is commented out where it doesn't work and in the one where it works that is irrelevant because it works it just puts up an alert I don't want.

You should be calling
window.location = url;
not
windows.location = url;