Reason for "Cannot read properties of undefined" [duplicate] - javascript

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 9 months ago.
Here's the thing. I looked up a pong game for java and now I want to try to make it in js. I'm still not good at js and I'm trying to code a simple pong game while trying to use classes like in java. But the problem is I always get this error "Uncaught TypeError: Cannot read properties of undefined (reading 'move')". I've tried looking online for solutions but I still don't get it.
This also shows up for the other two methods, draw and run.
Can anyone please kindly tell me why this happens?
class Game {
constructor() {
this.run();
}
run() {
this.move();
this.draw(ctx);
requestAnimationFrame(this.run);
}
draw(ctx) {
paddle.draw(ctx);
}
move() {
paddle.move();
}
}
let game = new Game();
Thank you very much in advance to anyone who will answer this.

In this case, you call to the method of instancepaddle and it's not declare yet.
That's why, javascript cheat as paddle undefine variable.

Related

How to use push() or similar methods as a function argument in JavaScript [duplicate]

This question already has answers here:
Accessing an object property with a dynamically-computed name
(19 answers)
Closed 1 year ago.
I am trying to create a function that uses the push() or pop() methods as arguments when it is called. I have a working a code but I noticed that I repeated myself a lot and I know that a function would help to improve my code quality, however, I have not been able to find a way to dynamically introduce the push() or pop() methods so I do not have to repeat the same lines of code when I want to do something similar.
This is the current working code (and this is similar to other lines):
pushBtn.addEventListener("click", () => {
if (inputEl.value) {
myEmojis.push(inputEl.value)
inputEl.value = ""
}
render(myEmojis)
})
I created a function that I would pass the push() argument to but it doesn't work as expected.
Here is the function I tried to create:
function modifyEmoji(action) {
if (inputEl.value) {
myEmojis.action(inputEl.value)
inputEl.value = ""
}
render(myEmojis)
}
How I call the function:
pushBtn.addEventListener("click", () => {
modifyEmoji(push)
})
This returns: "Uncaught TypeError: myEmojis.action is not a function"
Thanks in advance.
this line of code: myEmojis.action(inputEl.value)
says that a funcation named "actions" is defined for object array, While this is not the case and so it causes the error

Undefined after using addEventListener [duplicate]

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 1 year ago.
I am very new to Javascript and am trying to translate a game i made in python into javascript. I am currently trying to get keyboard input for the game. Whenever i run this however it gives me the following error:
Uncaught TypeError: Cannot read property '0' of undefined(at line 4 in this example)
Board is a 2d array used to store the board and i have tested that before the addEventListener statement Board is not undefined.
Why is this error happening and what should i do to fix it. As mentioned before i am a complete beginner at javascript so simple explanations would be greatly appreciated.
Kind regards
document.addEventListener('keydown', function(event){
if(event.keyCode == 65){
console.log(Board)
Board[this.block1[0]][this.block1[1]]=null;
Board[this.block2[0]][this.block2[1]]=null;
Board[this.block3[0]][this.block3[1]]=null;
Board[this.block4[0]][this.block4[1]]=null;
this in your code is not what you expect it to be. If block1 etc are local variables, reference them without this.. If they are members of your encapsulating object, change your callback function to use arrow syntax to let this reference your object: document.addEventListener('keydown', event => { /*...*/ })

document.getElementById().children.length - Cannot read property 'children' of null [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
Saw this error on the console -
VM2134:1 Uncaught TypeError: Cannot read property 'children' of null
I think this is where it happened -
if (document.getElementById('confirmMsg').children.length > 0) {
document.getElementById('confirm').classList.add('ui-state-error')
}
else {
document.getElementById('confirm').classList.remove('ui-state-error')
}
I'm not familiar with javascript but I feel like I need to make sure that element exists && has children? Please help fix this issue. Thank you!
Did you put this code before or after the actual HTML? Because this could generate an error if the element isn't yet loaded.
A more obvious answer would be "heh, there's no such ID in the DOM" :)
And finally, you could do a test in order not to get this error...
Something along those lines:
function foo() {
if (document.getElementById('confirmMsg')) {
if (document.getElementById('confirmMsg').children.length > 0) {
document.getElementById('confirm').classList.add('ui-state-error')
} else {
document.getElementById('confirm').classList.remove('ui-state-error')
}
} else setTimeout(foo, 1000);
}
Would call itself until the element exists, and then do the expected stuff.
I know there must be a cleaner and prettier way to do this, I was just trying to get the idea down :)

Error "Cannot read property of undefined" when wrapped in a setTimeout [duplicate]

This question already has answers here:
Pass correct "this" context to setTimeout callback?
(6 answers)
Closed 6 years ago.
I have been working on a piece of code that is meant to handle multiple, small video elements on a single webpage but I am having trouble making the multiple progress bars sync with their respective videos.
(Current jsFiddle prototype)
This piece of code $(this).find("progress").attr("value", $("video", this)[0].currentTime); seems to work inside the main function, but when I wrap it in another function with a setTimeout so the progress bar actually animates I get this error:
"Cannot read property 'currentTime' of undefined at function"
I've tried a few variations to see if I could get it working myself but I haven't been able to fix it by throwing code at the wall like I usually do.
Would someone be able to tell me why it's doing this?
In the setTimeout your this is not the main this. So your code doesn't work. To work in the setTimeout, you need to get the this before the setTimeout and the use it.
Example
var that = this;
setTimeout(function(){
// here use that
},100);
You must change progress max to video duration or total time. and make it value to currenttime . then lets go
$(document).ready(function(){
var video = $('#YourVideoIDorClass').get(0`);
video.addEventListener("onplaying", function () {
progress.val = video.currentTime
}, false);
})

Error in Overriding alert with console.log function in javascript [duplicate]

This question already has answers here:
Uncaught TypeError: Illegal invocation in JavaScript
(2 answers)
Closed 6 years ago.
I am new to javascript. Due to certain reasons, I need to override windows.alert function by console.log function. For that, I have written following code,
window.alert = console.log;
alert('abc'); // gives TypeError : Illegal invocation.
I don't know what's wrong I am doing here. As per my knowledge, it's possible to modify javascript function reference with another function object.
Edit
Many have downvoted my question and given me reference to similar question, but
my problem is different. I want to suppress the warning of datatable grid library in jquery. That's why I want to replace alert by console.log or other function.
Hope this should work...
alert("msg");
function alert(msg){
console.log(msg);
}
This should do
var alert = (...params) => console.log(...params);

Categories