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
}

Firefox Throws error with this js code(ReferenceError: event is not defined) need fix

In chrome: if i excute this code(javascript)
function abc(event){
console.log('hello: '+event);
}
abc(event);
the above code gives output as :
"hello:undefined"
but same code if we excute in firefox we get error
what is the simple solution for this.

There is no event happening in your script to track. You are simply calling a method and passing it a property.
If you want to grab "event" then you have to have to create an event.
Example:
This is a click event in jQuery.
$(sometarget).click(function(e) {
console.log(e);
});

JS FileReader onloadend seems to be causing redirect

I am working on a frontend-intensive project that reads and parses CSVs via a new FileReader. Here is the offending code block, from what I have surmised thanks to Dev Tools:
function parseCSVs() {
let fileUpload = document.getElementById('file-input')
if(fileUpload.files.length) {
let fileReader = new FileReader(),
varLabels = varAssigner.querySelectorAll('input');
function _addUntilFull(i) {
fileReader.readAsText(fileUpload.files[i])
fileReader.onloadend = function() {
addVar(varLabels[i].value, csvToMatrix(fileReader.result))
if(varList.length == fileUpload.files.length) {
return;
} else {
_addUntilFull(i + 1)
}
}
}
_addUntilFull(0)
}
Preserved console messages
After preserving logs (see figure above), I discovered that the console was logging all the correct messages (leading me to think that my functions all work properly), but the document would clear/reload upon file submission and parsing completion, and the logs would say "Navigating to file:///etc/etc", so this problem most likely comes from unexpected behavior on the part of either the FileReader or input[type="file"] objects. I can't find anything in MDN's documentation of FileReader or other online forums that would explain why this is occurring. Please help! This has been such a headache -_-
Thanks!

I actually figured out what the problem was, and it had nothing to do with the above code block... The button that triggered the parseCSVs function was inside a form, and even though I had deleted the "action" and "method" attributes of the form, and the button had no "type", the button triggered a redirect after the onclick function fired. I also ran a test on a form and button with no attributes in a bare-bones HTML file and discovered the same behavior as above. Switching the element to a prevented the redirect and fixed the problem :)

How to check if onresize method is set?

Can I check if a onresize method was set?
I've previously used:
$(window).resize(function() { /* ... */ });
Due a unknown bug in another library, onresize is not called anymore. After executing above line it works perfectly again. The method is invoked once. If I execute the line in the Firebug console again, the method is invoked twice.
I would like to write a workaround, which sets onresize as soon as it's "reseted".
I'm looking for something like that: (undefined or null)
if (window.onresize == undefined) { /* ... */ }
The external library/framework is Richfaces 4 (Extended Data Table). As soon as I sort a column, some of the onresize function handler were gone.
Before:
$._data(window,'events').resize
// result on the Chrome console:
[Object, Object, Object, Object]
After using sorting:
$._data(window,'events').resize
// result on the Chrome console:
[Object]
I'm looking for a way to write a workaround.
JIRA Issue
https://issues.jboss.org/browse/RF-13117 (fixed with future release 4.3.4)

You could use $._data() which is not a method publicly supported:
$(window).on('load',function() {
if(!$._data(window,'events').resize)
alert('none resize bound');
});
In older jquery version it was: $.data()

what i used in my project was
$(window).unbind('resize').bind('resize',function(){
//code here
});
it will remove all the previously bind (registered) handlers for resize event and register this new function as the handler.
this approach is useful only when you want to attach a single event handler.

Thanks for all answers and comments. As suggested I went to the source of the problem and wrote for that a workaround including opening an issue.
window.RichFaces.ui.ExtendedDataTable.prototype.deActivateResizeListener = function() {
if (this.resizeEventName != undefined) {
$(window).off(this.resizeEventName);
}
};
I accepted roasted answer since it really helped to find a workaround and his answer answered my question if there is a way to find out if a event handler is attached.

dojo dijit.Dialog destroy underlay error

I have a class that extends dijit.Dialog but only to set default functionality and buttons for my site. When clicking the dialog's cancel button the following code is run:
this.actionDialog.destroyRecursive();
this.actionDialog.destroy();
nb this.actionDialog = dijit.Dialog
Sometimes (not always) the following error gets thrown:
Uncaught TypeError: Cannot call method 'destroy' of undefined
DialogUnderlay.xd.js:8
Which causes following dialogs to incorrectly display. I am using 1.5 from Google API's. Am I missing something with the underlay code?
Error thrown after Ken's answer:
exception in animation handler for: onEnd
TypeError: Cannot read property 'style' of null
Both from dojo.xd.js:14. But the code still works properly.

I'm still not entirely sure what the problem is, other than for some reason dijit.DialogUnderlay code is getting confused. FWIW, this doesn't happen in Dojo 1.6.
While I was poking at some potential solutions, I seemed to accidentally find out that avoiding this problem is perhaps as easy as calling hide() on the dialog immediately before destroying it, e.g.:
this.actionDialog.hide();
this.actionDialog.destroyRecursive();
Alternatively, you might be interested in hiding the dialog, then destroying it once the hide animation finishes.
Here's how you can do it on Dojo 1.5 and earlier (tested 1.3+):
dlg.connect(dlg._fadeOut, 'onEnd', function() {
this.destroyRecursive();
});
dlg.hide();
In 1.6, the fadeOut animation is no longer exposed on the instance (granted, it was technically private earlier anyway), but onHide now triggers once the animation ends (whereas before it triggered as soon as it began). Unfortunately a setTimeout is needed to get around an error that occurs due to other code in the branch calling onHide, which assumes that something still exists on the instance which won't after we've destroyed it (see #12436).
dlg.connect(dlg, 'onHide', function() {
setTimeout(function() { dlg.destroyRecursive(); }, 0);
});
dlg.hide();
See it in action on JSFiddle: http://jsfiddle.net/3MNRu/1/ (See the initial version for the original error in the question)

The dialog.hide() method returns a Deferred, your code can be something more readable like this:
var dialog = this.actionDialog;
dialog.hide().then(function(){ dialog.destroyRecursive(); });
Be careful not to do this:
this.actionDialog.hide().then(function(){ this.actionDialog.destroyRecursive(); });
At the context of then this has another meaning!

You only need to call destroyRecursive()
The second destroy command is what is probably causing the error, and the error probably is causing the issues with other dialogs.
http://dojotoolkit.org/api/1.3/dijit/_Widget/destroyRecursive
destroyRecursive
Destroy this widget and it's descendants. This is the generic "destructor" function that all widget users should call to cleanly discard with a widget. Once a widget is destroyed, it's removed from the manager object.

I was getting the IE8 error : 'this.focusNode.form' is null or not an object. I found this was the result of the dialog.hide() returning a deferred. I wrote my own _closeDialog which eliminated the IE error.
_closeDialog : function(cntxt){
cntxt.popup.hide().then(
function(){
cntxt.popup.destroyRecursive(false);
cntxt.popup.destroy(false);
cntxt.destroyRecursive(false);
cntxt.destroy(false);
});
},