I have two functions which I'm trying to call with an inside input tag using #keydown="test(); numOnly();"
and get the error TypeError: Cannot read properties of undefined (reading 'key')
numOnly(event) {
const numPattern = /[\d]/;
const eventVal = event.key;
if (!numPattern.test(eventVal)) {
event.preventDefault();
} else {
return true;
}
},
test() {
console.log('Test function() called');
}
When I remove the test() function it works.
The error should be telling you it's occurring on this line:
var eventVal = event.key;
Cannot read properties of undefined (reading 'key') means the object that 'key' is a property of (event) is undefined. If you console.log(event) right before that line, I'm sure you'd get undefined proving the error message correct. event is a parameter of your method, so the only reason it would be undefined is if nothing is being passed in.
Checking the Vue docs, you pass the original DOM event to a method using the special $event variable. Therefore, this should fix your error:
<input #keydown="test(); numOnly($event);" />
Related
I would like to modify the $(document).ajaxStop function to set the localStorage variable when it is called (without actually changing the function that it calls). What I have tried is something like this:
origstop = $(document).ajaxStop;
$(document).ajaxStop = function(fun) {
localStorage.var = 'nice';
origstop(fun);
}
This did not work because it changes back right away, so when I run $(document).ajaxStop I get the same function as origstop.
Another way that I have found on StackOverflow is this:
(function($){
var jqAttr = $.fn.attr;
$.fn.attr = function( elem, name, value, pass ) {
if (name === 'ajaxStop') {
localStorage.var = 'nice';
jqAttr(elem, name, value, pass);
} else {
jqAttr(elem, name, value, pass);
}
};
}(jQuery));
This causes an error Uncaught TypeError: Cannot read properties of undefined (reading 'length') whenever the function is actually called. Also, I am also not sure how this works, so I have no idea how to fix this either...
What would be the correct way to approach this?
Trying to set this variable to an element's id number, but I can't make sense of this error statement.
{Uncaught TypeError: setting getter-only property "selectedProjectId"}
I declared the variable here.
const LOCAL_STORAGE_LIST_KEY = 'project.lists';
const LOCAL_STORAGE_SELECTED_LIST_ID_KEY = 'project.selectedProjectId';
const projects = JSON.parse(localStorage.getItem(LOCAL_STORAGE_LIST_KEY)) || [];
const selectedProjectId = localStorage.getItem(LOCAL_STORAGE_SELECTED_LIST_ID_KEY);
function save() {
localStorage.setItem(LOCAL_STORAGE_LIST_KEY, JSON.stringify(projects));
localStorage.setItem(LOCAL_STORAGE_SELECTED_LIST_ID_KEY, selectedProjectId);
}
export {
projects,
save,
selectedProjectId,
}
I try to assign it a different value here.
projectList.addEventListener('click', e => {
if (e.target.tagName.toLowerCase() === 'li') {
console.log(e.target.dataset.projectId);
console.log('works');
selectedProjectId = e.target.dataset.projectId;
saveAndRender();
}
});
I'm following webdev simplified's tutorial on a better to-do-list in js. I'm following pretty closely, but mine keeps throwing the type error. How do I fix this? Any advice would be helpful. For more clarification, I am also using webpack if that is important.
const cannot be assigned to a new value. Use let instead.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
I'm trying to call getQuestions() inside the same object it is a method of. But when I try to read the quizz.config.allQuestions property, I get an error message reading "Uncaught TypeError: Cannot read property 'getQuestions' of undefined." Is there something I am missing here?
var quizz = {
config: {
urlJSON: 'questions.json',
allQuestions: quizz.getQuestions()
},
getQuestions: function() {
$.getJSON(quizz.config.urlJSON, function(questions) {
return questions;
});
}
};
When you're trying to assign to allQuestions the quizz object isn't done being initialized yet. So you'd have to do it after creating the object.
var quizz = {
config: {
urlJSON: 'questions.json'
// don't declare allQuestions
},
getQuestions: ...
};
quizz.allQuestions = quizz.getQuestions();
The problem with that though is that $.getJSON is an asynchronous function, meaning it won't return that value immediately. That's why it has a callback in it. Instead, you might try defining getQuestions like this:
getQuestions: function(callback) {
$.getJSON(quizz.config.urlJSON, callback);
}
Then you can get the values like this:
quizz.getQuestions(function(questions) {
quizz.config.allQuestions = questions;
});
Module calls a function from other module for registering and de-registering events on elements. I'm passing eventType as an argument. But getting an error Uncaught TypeError: elementObject.element.EventOption is not a function
elementObject = { element: document.getElementById("elemId"),... }
eventRegisterer(elementObject, addEventListener)
Function for event registration:
function eventRegisterer(elementObject, EventOption){
elementObject.element.EventOption('change', changeFunction)
}
function changeFunction() {
....
}
Why is that storing addEventListener as argument is not working?
Found the solution:
function eventRegisterer(elementObject, EventOption){
elementObject.element[EventOption('change', changeFunction)];
}
Using array-like notation instead of directly using property name did work.
I'm not sure why im getting the error, but i'm getting "cannot call method replace of undefined". It's happening on the the $('#wizard'+optionalArg) part, if I remove the optionalArg part it works fine. Any idea why this is happening?
function loadWizard(optionalArg)
{
optionalArg = (typeof optionalArg === "undefined") ? "" : optionalArg;
$('#wizard'+optionalArg).smartWizard({contentURL:'/welcome/form_view',
transitionEffect:'slideleft', onLeaveStep:leaveAStepCallback,onFinish:onFinishCallback, contentCache:false});
}
function call
var id = 2;
loadWizard(id);
before I send over the ID i run this
$('#all_wizards').append('<form action="#" method="POST"><div id="wizard2" class="swMain template"></div></form>');
so wizard2 should exist..
It can be:
$('#wizard'+optionalArg) //would make wizard2
there is no element in your html with this id, so calling method on undefine throw exception.
Try with null check:
function loadWizard(optionalArg)
{
var myElement=$('#wizard'+optionalArg);
if(myElement.length>0){
$('#wizard'+optionalArg).smartWizard({contentURL:'/welcome/form_view',transitionEffect:'slideleft', onLeaveStep:leaveAStepCallback,onFinish:onFinishCallback, contentCache:false});
}
}
Are you sure you have an element with
id="wizard1" (assuming optionalArg = 1)
Debug by putting a console.log to ('#wizard'+ optionalArg) and check whether the element exists? most likely the element does not exists and hence creating and error.