carousel.js:5 Uncaught TypeError: Cannot read property 'children' of null**
I got this error when I'm going to ad slider to the page.
here is the js code for the error.
const track = document.querySelector('.carousel_track');
const slides = Array.from(track.children);
const dotsNav = document.querySelector('.carousel_nav');
const dots = Array.from(dotsNav.children); //here
const slideWidth = slides[0].getBoundingClientRect().width;
slides[0].style.left = 0;
slides[1].style.left = slideWidth + 'px';
Can anyone give me a solution for this? I really appreciate your help.
Apparently the error throws here const dots = Array.from(dotsNav.children); //here , though the source of error is coming from previous line.
The error hints that the track is null, which can happen when the selector didn't return any value.
Without seeing your HTML code its not so clear whats the exact reason, but its obvious that the element with class carousel_nav doesn't exist in the DOM at the moment of execution of this code.
Steps to debug:
Do the console log after acquiring the track object.
const dots = document.querySelector('.carousel_nav');
console.log('Dots are: ', dots);
...
Then on the console of the browser check the value, its probably null.
Check if the class is written correctly on the HTML element, without typos and mistakes. You can even run the js directly on the browsers console to see if the code is actually fetching .carousel_nav
If when you run your js code in browser's console and it returns actual value instead of null, but on the page load it still returns null then it can mean the carousel is being initialized by 3rd party library after certain event, most probably document.ready, you have to as well listen to the document ready event and only after that execute your code.
Sometimes just waiting for the document ready is not enough, so check the documentation of the library that you use, it should have some callback where you can execute your code exactly after the carousel is being initialized.
Might be that the carouself library that you use, need an additional parameter to render dots, do you actually see the dots in the rendered dom?
If you need more hints, provide the library name youre using and also html
P.S.
Sorry I didn't see //here comment. But the debugging steps are the same
I have been playing around with the General Transit Feed Specification - Realtime, and I am following exactly the example given on google's documentation:
https://developers.google.com/transit/gtfs-realtime/examples/nodejs-sample
for JavaScript, using my cities local transit feed, however I keep encountering the following error:
var feed = GtfsRealtimeBindings.FeedMessage.decode(body);
^
TypeError: Cannot read property 'decode' of undefined
I have a working implementation in python that follows their example for that, so I can verify with certainty that the feed is the correct format.
I am running the code using the instruction:
node index.js
My package.json includes all the relevant dependencies, and I have installed using npm the required packages.
I have searched far and wide for a solution to this error but have had no luck. Any advice?
Looking at the current example code on GitHub
(https://github.com/MobilityData/gtfs-realtime-bindings/tree/master/nodejs#example-code)
it seems you're missing transit_realtime in between:
GtfsRealtimeBindings.transit_realtime.FeedMessage.decode(body);
On the example there is a link to the github of the Javascript language binding. The github example differs from the documentation example. I figure the documentation is simply out of date.
the line in the google documentation example
var feed = GtfsRealtimeBindings.FeedMessage.decode(body);
should be var feed = GtfsRealtimeBindings.transit_realtime.FeedMessage.decode(body); note the inclusion of .transit_realtime.
Alternatively this could be expressed in the line:
var GtfsRealtimeBindings = require('gtfs-realtime-bindings');
as var GtfsRealtimeBindings = require('gtfs-realtime-bindings').transit_realtime;
and the google documentation example code beyond that line would remain as it is.
You need to import gtfs-realtime-bindings by referencing the transit_realtime property. It's a change from the old protobuf.js bindings generator, but this is done to separate namespaces.
It won't work
cont GtfsRealtimeBindings = require('gtfs-realtime-bindings');
It will:
const GtfsRealtimeBindings = require('gtfs-realtime-bindings').transit_realtime;
Now you can get feedMessage and decode it.
const { FeedMessage, FeedHeader, FeedEntity, VehiclePosition } = GtfsRealtimeBindings;
in my website i use one javascript file called " backend.js "
contain javascript/jquery codes for all the website pages
so, for example in a function with a line like this :
var latit = document.getElementById('lat').value;
it works fine on a page that contains id='lat'
but in other pages i got this error in console :
Uncaught TypeError: Cannot read property 'value' of null
and also with style :
Uncaught TypeError: Cannot read property 'style' of null
and it causes stop of executing my other functions below the line.
the same with any line with document.getElementById code in all my file.
i found a solution but i don't know if it's the best or there is better
my solution it to make a test for any document.getElementById in my file like this :
if (document.getElementById('lat') != null) {
var latit = document.getElementById('lat').value;
}
is it the best solution ?
No need to call getElementById twice. You can store the result of the first call in a variable.
var lat = document.getElementById('lat');
if(lat) {
var latit = lat.value;
}
If you don't want additional variables, you can also use
var latit = (document.getElementById('lat') || {}).value;
or || Object.create(null) if you are afraid Object.prototype.value might exist.
The reason you are getting those errors is that the web app you are writing has various states and not all of them have the elements you are specifying.
If this is a problem with a SPA web app (single page app), you need to effect some degree of routing so that you are only loading the appropriate javascript for each page in the app.
If this is a libary used on many pages, you need to check the page it is on and assume only the elements that should be there are there.
If this is a library only used on one page, it is a dynamically changing but non-SPA web app, and you need to check the application state and assume only the elements that should be there are there.
I have a bit of a problem. I have huge amount of JavaScript on my site, and when i am trying to merge it, i suddenly can't choose an option.
The console in Google Chrome shows this:
Uncaught TypeError: undefined is not a function
The code is simply to long
Uncaught TypeError: Cannot read property 'OptionsPrice' of undefined
<script>
var optionsPrice = new Product.OptionsPrice({"productId":"224","priceFormat":{"pattern":"%s\u00a0DKK ","precision":2,"requiredPrecision":2,"decimalSymbol":",","groupSymbol":".","groupLength":3,"integerRequired":1},"includeTax":"true","showIncludeTax":true,"showBothPrices":false,"productPrice":29,"productOldPrice":29,"priceInclTax":29,"priceExclTax":29,"skipCalculate":1,"defaultTax":25,"currentTax":25,"idSuffix":"_clone","oldPlusDisposition":0,"plusDisposition":0,"plusDispositionTax":0,"oldMinusDisposition":0,"minusDisposition":0,"tierPrices":[],"tierPricesInclTax":[]});
</script>
Uncaught TypeError: Cannot read property 'Config' of undefined
<script>
var spConfig = new Product.Config({"attributes":{"145":{"id":"145","code":"size","label":"St\u00f8rrelse","options":[{"id":"32","label":"10ml","price":"0","oldPrice":"0","products":["225","226","227","228"]},{"id":"31","label":"30ml","price":"30","oldPrice":"30","products":["229","230","231","232"]}]},"146":{"id":"146","code":"styrke","label":"Styrke","options":[{"id":"36","label":"0mg","price":"0","oldPrice":"0","products":["225","229"]},{"id":"35","label":"6mg","price":"0","oldPrice":"0","products":["226","230"]},{"id":"34","label":"12mg","price":"0","oldPrice":"0","products":["227","231"]},{"id":"33","label":"18mg","price":"0","oldPrice":"0","products":["228","232"]}]}},"template":"#{price}\u00a0DKK ","basePrice":"29","oldPrice":"29","productId":"224","chooseText":"--V\u00e6lg venligst--","taxConfig":{"includeTax":true,"showIncludeTax":true,"showBothPrices":false,"defaultTax":25,"currentTax":25,"inclTaxTitle":"Inkl. moms"}});
</script>
Uncaught Reference Error: Calendar is not defined
Calendar._DN = ["s\u00f8ndag","mandag","tirsdag","onsdag","torsdag","fredag","l\u00f8rdag"]; // full day names
I hope there is someway that you can help me.
I am on a Magento platform, with a custom template.
Thanks
This sounds like a syntax error in one of the JS files. Either in the one where Product is defined or where you get your first error.
Sometimes you miss a comma and your entire object is not defined. I would look for that first.
The easiest way is to use JSLint.
where is "Product" defined?
you should first have Product in your page! or is it defined in a closure function?
I am using the mask plugin into my project. I have included it like this;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
Even though I am able to use the mask method like this and it works without a problem;
$("#txtTel").mask("+380 999 999 999")
I am not able to use it to change its definitios like this;
$.mask.definitions['9'] = '';
$.mask.definitions['#'] = '[0-9]';
It gives me this error;
Uncaught TypeError: Cannot read property 'definitions' of undefined
What can be causing this problem? Thanks in advance...
You're using one plugin with the documentation from another.
The syntax you're using applies to this plugin:
https://www.npmjs.com/package/jquery.maskedinput
... not to the one you're using.