Javascript error on code for Draggable SVG shape - javascript

I'm working with some code provided via this post, courtesy of #Phrogz.
I've now tweaked and trimmed it to a launch-point for my needs, so I'm trying to plug that JS into my test page.
I threw a copy of my test page here on Pastebin.
I'm getting this error (courtesy of line 126):
Uncaught TypeError: Cannot call method 'addEventListener' of null
My attempts to this point have all revolved around the guess that the updateFromInput function is at the heart of the error. I played with it all the ways that I could think of, and no dice :)
Granted, though, I'm faaar from being a JS master, so ...
Can someone explain why the error?

Apparently, input_1 is null.
The problem could be with querySelector. You could instead try getElementsByClassName.
Oh, your class on your element is "input1" but you're selecting "input_1". Easy mistake :)

Related

How do I find errors in jsfiddle?

I love jsfiddle and lately I've been learning javascript. There are of course many errors as I learn but I haven't figured out how to read error codes from console.
Latest I have is "1182:12 Uncaught TypeError: Cannot read property 'style' of null"
Each section of my code is less than 1000 lines of code, but clearly combined it's more. Is there a way to use this info to find where the error is happening?
TIA!
The console should show you an underlined section where the line number is that you can click:
The line number does not correspond to the line number in the JSFiddle code editor, but it'll take you to the error location in the browser's Sources panel:
This problem is not specific to JSFiddle. Many online code editors without integrated consoles have this issue, and this solution should work in most of them.

Uncaught TypeError on setting attribute in javascript

After a lot of research, i finally found how to set the initial scale of a webpage using javascript for example in Chrome DevTools. The code should be like this:
document.getElementById("viewport").setAttribute("content", "initial-scale=0.5, user-scalable=yes");
But, I´m always getting error: Uncaught TypeError: Cannot read property 'setAttribute' of null(…) I tried this on different pages. Is there someting that has changed? I found this method in different posts.
The error message indicates that there is no element with an id of "viewport" on the page. You may be looking to modify the attributes on the viewport meta tag instead, in which case this answer describes the right approach using JavaScript.
I tried first using document.getElementById("viewport"); and later, using your full code and it worked.
Here is the screenshot result:
So, maybe try this. Call document.getElementById("viewport"); and if if is not null or undefined, execute:
document.getElementById("viewport").setAttribute("content", "initial-scale=0.5, user-scalable=yes");

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined using Ckeditor

I am trying to filter words(ants,words) using ckeditor.This works fine with normal textarea. http://jsfiddle.net/fqthJ/22/ .Now I am trying it with ckeditor http://jsfiddle.net/s47M3/35/ but I get the following error
Uncaught TypeError: Cannot call method 'toLowerCase' of undefined using Ckeditor
If you check on the console ,I get the above error only once I type the filtered words(ants and words) otherwise no error comes.
Please help
Actually I have been trying to solve a same type of question yesterday that you have posted.
The problem is you can't use jQuery long with CKEDITOR and therefore you faced the error.
FIX:
alert("The following word/words "+
CKEDITOR.instances['editor1'].getData().match(regAry[index])+" is banned");
JSFiddle
If you're interested with jQuery Adaptor of CKEditor, then you can go with your own.
In the second fiddle, try putting a debugger; line just before alert('the following words... and then open up your browsers developer console before running it again. You'll notice that the $(this) is a CKEditor specific dom element that looks like an iFrame so .val() will probably fail, because it looks for strings. I don't know enough about CKEditor to figure out how to get editor content out of it, but know that it is html formatted if you browse around in the CKEditor.dom.element, so it will contain html elements in addition to ordinary text etc.

Javascript snippet not working in Chrome, but works in Internet Explorer

I have a really basic snippet of javascript code that works in Internet Explorer, but not Google Chrome. Here's the line it breaks on:
var formChildren = document.getElementById('myForm').children;
This is the first line in my script. The error I receive is:
cannot read property 'children' of null.
Does anyone know if I'm missing something? I can't imagine why Chrome would error out on such a basic line.
This is part of an MVC 4 project if that makes any difference.
Thank you in advance!
Chrome actually does return null in an instance where it is unable to find an element with that ID. You could hide this error by using (document.getElementById('myForm') || {}).children
My problem is solved. Yes I did some extra testing and realized that I was able to use getElementsByName successfully on both IE and Chrome so I took a look and realized I forgot to add the Id to the form. It was still unexpected that IE knew what it element was without the id set, but the problem is solved.
Thank you Kyle and hackNightly, your input helped a lot in narrowing down my answer.

Javascript : is null or not an object

I was having a problem with IE finding both secure and non-secure items on a page. This seems to have been sorted thanks to a solution by David (many thanks!) who suggested altering the JS we use to display a gallery of images at the top of the page.
The issue now is that the gallery doesn't work!
Here's the error message:
Webpage error details
Message: 'this.galleryData.0.image' is null or not an object
Line: 266
Char: 4
Code: 0
URI: https://www.droverholidays.co.uk/scripts/jd.gallery.js
The page is:
https://www.droverholidays.co.uk/bikehireform.php
I don't understand JS very well so it would be great if anyone can tell me what I need to do to make this work!
In bikehireform.php change the line that says
startGallery();
to
window.addEvent('domready', startGallery);
In looking at your other question, I personally think CptSkippy's answer is still the correct one.
Stick with the onDomReady approach and make sure your external assets are being loaded from http***s***
Wow... I think I may have got it. I substituted 'load' for 'domready' in Rob's solution, above, and now I don't get the IE warning, and the script works. It seems to be a bit slower than before, would that make sense?

Categories

Resources