Cannot read property 'style' of null - in Chrome's Javascript Console - javascript

I was checking the JS console out and it helped me fix a few minor issues, but I would like to know if this warning is anything to seriously worry about?
This is the code which gives the error:
<script type="text/javascript"
src="https://www.safaviehhome.com/product_images/locations/js/jqgalscroll.js"></script>
<script src="https://www.safaviehhome.com/product_images/mainnav/stuHover.js" type="text/javascript"></script>
<script>
function layerSetup(id,visibility){
if(document.getElementById){
this.obj = document.getElementById(id).style;
Uncaught TypeError: Cannot read property 'style' of null
Uncaught TypeError: Cannot read property 'style' of null
<!--Includes many more of the same "Cannot read property 'style' of null messages -->
this.obj.visibility = visibility;
return this.obj;}
else if(document.all){
this.obj = document.all[id].style;
this.obj.visibility = visibility;
return this.obj;}
else if(document.layers){
this.obj = document.layers[id];
this.obj.visibility = visibility;
return this.obj;}
}
function visVisible(param){
new layerSetup(param,'visible');
}
function visHidden(param){
new layerSetup(param,'hidden');
}</script>
I cannot really figure out why this is happening and whether it's something I should worry about since our Rug categories function fine. Can anybody offer any insight? I apologize for not offering any of my own explanations but I didn't write this JS a former co-worked did and it's now up to me to debug every mistake he made. It's a learning process but I'm still somewhat new to this ..

This could be happening for two reasons.
Somewhere on the page the layerSetup function is being called with null as one of the parameters.
An element with the id being passed the the layerSetup function does not exist on the page.
In the Chrome dev console you can click Pause on All Exceptions, a button in the bottom left bar with a pause symbol. This will help you to determine what the parameters are that are being passed to the function.

Avoid document.all
http://www.javascripttoolbox.com/bestpractices/
http://simonwillison.net/2003/Aug/11/documentAll/

Related

Assigning a document method to a variable returns undefined in Chrome extension

When I run the below code in my extension:
let SpotifyPlayer, SpotifyLeftButton
SpotifyLeftButton = document.createElement("img")
SpotifyLeftButton.src = "chrome-extension://.../assets/skip1.png"
SpotifyLeftButton.className = "spotify-left-btn"
SpotifyLeftButton.title = "Click on this button to start the skip of the song."
SpotifyPlayer = document.getElementsByClassName("player-controls__buttons")[0]
SpotifyPlayer.appendChild(SpotifyLeftButton)
I get the following error, "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'appendChild')".
However, when I run the code in the console, it works.
I thought that this error was occurring because the page wasn't fully loaded. However, the code still doesn't work even after wrapping it with window.onload () => {}.

Property says it can't be read, even though it can read the property

Before I start, I just want to say I have very little experience with javascript, so maybe I'm missing something very obvious, but anyways.
I have an array of objects called Accommodations. I have the following code:
alert(this.quoteService.activeBasket.components.length);
This alert shows a length of 3, but I get a ton of errors saying:
An unexpected error has occurred. TypeError: Cannot read property 'length' of undefined
I'm just not sure how it's possible that it can read the .length property, but it's throwing errors that it can't...
Originally, the component object wasn't imported into this file, but even after importing it, I still have the same error...
Any help is greatly appreciated.
Edit:
Here is a little more context:
Basically I have an html file that has a radio button, this button should be greyed out, based on the method found in the ng-disabled tag:
<li class="c-3-12">
<div class="radio-btn" tl-field>
<input type="radio" class="radio" ng-model="vm.requiredBookingState"
ng-value="1" ng-disabled="!vm.validateOutfitLength()">
<label i18n>Confirmed</label>
</div>
</li>
Here is that method:
validateOutfitLength()
{
var rv = true;
let accoms: Accommodation[] = this.quoteService.activeBasket.accommodations;
accoms.forEach(accom => {
if (accom.outfitLength < 350) {
rv = false;
}
});
return rv;
}
The error for this code is different than above! The error for this is:
An unexpected error has occurred. TypeError: Cannot read property 'forEach' of undefined
This is a very large project that I'm working on, and I'm unaware if it's intentional that this method is being called many times... I assume it is intentional though.
Try this
alert(this.quoteService['activeBasket']['components'].length === undefined ? '' : this.quoteService['activeBasket']['components'].length);
This has been solved! I do want to give some credit to Chellappan, as I wouldn't have been able to find the solution without his answer.
Basically, there must be multiple calls to the validateOutfitLength method and within some of those calls, the quoteService.activeBasket.accommodations/components were undefined. The fix was simple, it was just basically checking whether the object was undefined before doing anything with the value.
let accoms = this.quoteService.activeBasket.accommodations;
if (typeof(accoms) != 'undefined') {
// do something with accoms
}

Uncaught TypeError: Illegal invocation when looping through object

I am trying to make a for loop which loops a object and should have logged the appropriate value of the instrument respectively,
but I am getting this unknown error when executing this :
gge = true;
for (var ins in instruments) {
if (gge) {
this_ = ins;
console.log(instruments[this_]);
}
};
executing this script is resulting in this error..
Uncaught TypeError: Illegal invocation
the instruments object is http://pastebin.com/tRzvpwgU
can anyone please help with solving this?? or explaining why this is happening?
I tried..
console.log(JSON.stringify(instruments[meow]));
stringing it somehow removes the error.

js Model Animation Using three.js r68

As stated in the title, I cannot get animation to work. I'm pretty sure I'm missing something in my code because it works here, but not where I'm testing.
I create the animation object in playerCharacter.js with
this.init = function(){
for (var k in this.mesh.material.materials) {this.mesh.material.materials[k].skinning = true;}
this.animation = new THREE.Animation(this.mesh, this.mesh.geometry.animations[0].name);
this.animation.play();
}
In the update function I use:
this.animation.update(0.017);
And when I look at the console log I get:
Uncaught TypeError: Cannot read property 'length' of undefined
So it seems that in THREE.AnimationHandler, data.hierarchy is undefined, so I'm guessing that if I can somehow make it defined, the problem will be fixed. Except I don't know how, or even why it is not defined. Any help?
You are passing only the animation's name, not the whole data object. Use this instead:
this.animation = new THREE.Animation(this.mesh, this.mesh.geometry.animations[0]);

Uncaught TypeError: Cannot read property 'innerHTML' of null

Keep getting this error, no idea why
Uncaught TypeError: Cannot read property 'innerHTML' of null
My code is:
function write(message) {
document.getElementById('message').innerHTML += message + '<br/>';
}
function calculateCircumference (diameter) {
return diameter * 3.14;
}
write (calculateCircumference(4));
Admittedly, the error message is not exactly transparent as to its meaning (but at least you get an error - jQuery would just silently do nothing!)
What it means is that the result of document.getElementById('message') is null. Looking at the docs you will find that this happens when the element cannot be found.
The main reason for an element not being found is because it doesn't exist yet.
<script>// do something with document.getElementById('message');</script>
<div id="message"></div>
The above will FAIL because message does not exist yet. Moving the script after the div will make it work.
Side-note: 3.14 is far too inaccurate. Use Math.PI instead, it's as accurate as a number in JavaScript can be.
Seems that your code is executed before the DOM is ready
window.onload = function(){
function write(message) {
document.getElementById('message').innerHTML += message + '<br/>';
}
function calculateCircumference (diameter) {
return diameter * 3.14;
}
write (calculateCircumference(4));
}
If you have your id is set and you still get the same error, make sure you have done the opening and closing tags of your html correctly.
This error is usually caused when the element is not loaded and the js function is trying to access it.
try adding the <script> tag at the very end of the document before </body>
or check if the name of the element is mistyped.

Categories