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
}

Using jQuery's .load method to return one element from a page

I am new to jQuery and JS and I encounter what I believe is a syntax problem, but I haven't been able to fix it on my own.
I am using the .load method to display content on a page, which works perfectly when I use the following bit of code :
$("#mydiv1 a")on('click', function ()
{
$("#mydiv2").load(this.href);
});
When calling this.href, however, the entire page is returned (as expected). I would like to be able to return only one element in this page: #myelement. This is where my problem occurs: the following code doesn't work.
$("#mydiv1 a")on('click', function ()
{
$("#mydiv2").load(this.href #myelement);
});
If my syntax is indeed incorrect, what would be the right way to put it?
Any help would be greatly appreciated.
Thanks.

You have to build a string:
$("#mydiv2").load(this.href + " #myelement");

Here is how to write it:
$("#mydiv2").load(this.href + ' #myelement');

Chrome Handling dataTransfer.types as Object

I'm having a really funky issue with dataTransfer in Chrome 24.0.1312.5 that I'm hoping I could get some ideas on. Basically, I have a nodeIterator that singles out some useful elements from an iframe. For each of these elements, I'm adding event listeners to permit dropping of content. I'm having a problem with this bit of code:
currentNode.addEventListener('dragover', function (e) {
// Only accept images
// Error occurs in below conditional
if (e.dataTransfer.types.contains('text/uri-list')) {
e.preventDefault();
}
});
Here's the portion of my code that adds the data:
figure.draggable = 'true';
figure.addEventListener('dragstart', function (e) {
e.dataTransfer.setData('text/uri-list', img.src);
e.dataTransfer.setData('text/plain', img.alt);
e.dataTransfer.setData('application/x-trash.delete', img.id);
});
The error I get in the console is this:
Uncaught TypeError: Object text/plain,text/uri-list,application/x-trash.delete
has no method 'contains'
I've written a fiddle that should be able to reproduce this issue, but of course it works just fine.
Any ideas of something I might be missing? Or other relevant portions of code I should check?

It seems that dataTransfer.types returned in Chrome is a Array.You can use indexOf() instead of contains method to workaround.

jQuery missing : after property id

$('#note').click({
$('#trigger').remove();
$('#info').slideDown(4000, function(){
$(this).fadeOut(40000);
});
});
What I'm trying to do here is obvious. Sadly, when I try this piece of code, FireBug throws the following error: missing : after property id.
After trying to debug for some time, I saw that seemingly nothing is wrong. The highlighting shows correctly in my editor (Notepad++), and no previous error was found.
Thank you in advance for any help.

click expects a function. You are trying to pass it a pseudo object-literal having an invalid syntax.
$('#note').click(function() { // pass a function to "click"
$('#trigger').remove();
$('#info').slideDown(4000, function(){
$(this).fadeOut(40000);
});
});

Javascript error

I'm getting a JS error on displaying a page: Nothing concrete is specified but the line where it seems to be thrown. When looking into the source code of the page, I see the error is thrown inside the following script, but I can't understand why! It's only about loading images!
<SCRIPT language=JavaScript>
<!--
function newImage(arg) {
var rslt = new Image();
rslt.src = arg;
return rslt;
}
function changeImages(a, b) {
a.src = b;
}
newImage("\/_layouts\/images\/icon1.gif");
newImage("\/_layouts\/images\/icon2.gif");
// -->
</SCRIPT>
The error I am getting is when clicking on a drop down context menu on a page, for this line:
newImage("\/_layouts\/images\/icon1.gif");
The object doesn't accept this property or method
Code: 0
I really don't see what could happen... Any tips on what may be happening here?

Have you tried loading your scripts into a JS debugger such as Aptana or Firefox plugin like Firebug?

Why are you escaping the forward slashes. That's not necessary. The two lines should be:
newImage("/_layouts/images/icon1.gif");
newImage("/_layouts/images/icon2.gif");

It is hard to answer your question with the limited information provided:
You are not showing the complete script
You never said what the exact error message is, or even what browser is giving the error.
Which line number is the error supposedly coming from?
I'd recommend using Firebug in firefox for debugging javascript if you aren't already. IE tends to give bogus line numbers.
And as others have already said, the language attribute for script tags is deprecated.

Write proper xml with the " around attributes.
<script type="text/javascript">
function newImage(arg) {
var rslt = new Image();
rslt.src = arg;
return rslt;
}
function changeImages(a, b) {
a.src = b;
}
newImage("/_layouts/images/icon1.gif");
newImage("/_layouts/images/icon2.gif");
</script>

should your script block not be:
<script type="text/javascript">
?

For starters, start your script block with
<script type="text/javascript">
Not
<script language=JavaScript>
That's probably not the root of your problem, but since we can't see your script, that's about all we can offer.

You probably need to enlist the help of a Javascript debugger. I've never figured out how to make the various debuggers for IE work, so I can't help you if you're using IE.
If you're using Firefox or you CAN use Firefox, make sure you have a Tools / Javascript Debugger command. (If you don't, reinstall it and be sure to enable that option.) Next, open up the debugger, rerun the problem page, and see what comes up.

How are you calling changeImages? It looks as though you are not saving a reference to the images returned by newImage. You probably want to save the results of newImage and pass that to the changeImages routine. Then changeImages should look like this:
function changeImages(a, b) {
a.src = b.src;
}
You also may want to ensure that the images have finished loading before calling changeImages.
You've posted the routine that throws the error, without posting the error or showing us how you are calling it. If none of the answers posted fix your problem then please post some detail about how you are calling the method, which specific line the error is on, and what the error message is.

You firebug to debug.
http://www.mozilla.com/en-US/products/download.html?product=firefox-3.0.10&os=win&lang=en-US
https://addons.mozilla.org/en-US/firefox/addon/1843
JSLint is also a nice resource.
http://www.jslint.com/
Using CDATA instead of the <!-- // -->
http://www.w3schools.com/XML/xml_cdata.asp
<script type="text/javascript">
<![CDATA[
]]>
</script>