We Keep Coding

Can't get DOMelement by using variable in my environment but in console i can

My button in my websites have onclick for function addNewSetPlanningReskilling().
But I CAN'T get DOMelement by using variable in my environment, in console i CAN.
function addNewSetPlanningReskilling(){
numberOfSets++;
console.log(numberOfSets); // here i have number as i want to have, for example 3,4,5..
document.querySelector(`[data-key='${numberOfSets}']`).style.display = 'block';
}
Uncaught TypeError: Cannot read property 'style' of null at addNewSetPlanningReskilling at HTMLButtonElement.onclick

I found solution for this :
change this :
document.querySelector(`[data-key='${numberOfSets}']`)
for this:
document.querySelector("[data-key='"+numberOfSets+"']")

Uncaught TypeError: Cannot read property 'options' of undefined javascript

Everything works fine but from time to time there is a problem with the function. This makes it impossible to click a button and select a value from list. I tried to debug it but nothing is returned in the console.
_getSimpleProductId: function (element) {
var allOptions = element.config.options,
value = element.value,
config;
config = _.filter(allOptions, function (option) {
return option.id === value;
});
config = _.first(config);
return _.isEmpty(config) ?
undefined :
_.first(config.allowedProducts);
}
Error occurs:
Uncaught TypeError: Cannot read property 'options' of undefined
I think I have to change my question to "What I'm doing wrong?".

you should null check element.config
var allOptions = element.config ? element.config.options : null;
It looks like it's not always defined in your code

Your problem is that element.config is undefined.
You can either go with Basem's anwser (which would totally work) or find the source of the problem.
To me it looks like you expect to have options for the rest of your code, so I would go with the second solution.
Cheers!

TypeError: null is not an object (evaluating '*')

For the below code:
var item = cartModel.getlist()[index];
if((item.isDepo()) {
// Some code
} else if(!permission.hasPermissionToVoidSKU()) {
// Some code
} else if(item.sku.indexOf(mposConstants.RESTOCK_FEE_SKU) > -1){
// Some code
}
I'm getting this error:
TypeError: null is not an object (evaluating 'item.sku.indexOf')
If item object is null, the error is something different (see below). In what scenario will this error be thrown?
Update:
If item.sku is null, the error is:
[FATAL] [] [-] ["TypeError: Cannot read property 'indexOf' of null
If item is null, the error is:
[FATAL] [] [-] ["TypeError: Cannot read property 'isDepo' of null

The reason for the different error messages is quite simply that they are produced by different browsers. The error is the same (sku on the object item is null).
Given the following code
<script>
var item = {sku: null};
item.sku.indexOf("");
</script>
here is some error messages for different browsers:
Firefox: TypeError: item.sku is null
Firefox Developer Edition: TypeError: item.sku is null, can't access property "indexOf" of it
Opera: TypeError: Cannot read property 'indexOf' of null
at example.html:3
Safari: TypeError: null is not an object (evaluating 'item.sku.indexOf')
To get the error message you have gotten, item must be defined as an object, and sku must be set to null. If sku were undefined, you would have gotten an error message like this (Safari): TypeError: undefined is not an object (evaluating 'item.sku.indexOf'). If item was null, you would have gotten something like this: TypeError: null is not an object (evaluating 'item.sku').

Based on this answer and others, it sounds like you're getting that error because a function is called before the DOM element it references or acts upon has been loaded.
In the snippet of code you provided, I don't see a direct reference to any DOM elements, but I would suggest calling your script after your HTML has finished rendering (i.e. by putting any <script> tags at the end of your HTML, or by using a $(document).ready() call if you use jQuery).

Uncaught TypeError: Cannot read property 'attributes' of undefined

Hello everyone i am trying to perform delete operation in my web app,when i am deleting an element from DB, in console its showing this error.Please give your valuable solution for this Thanks in advance.
Uncaught TypeError: Cannot read property 'attributes' of undefined
at _clearTreeSelection (orphanController.js:888)
at Scope.$scope.clearSelection (orphanController.js:659)
at HTMLDivElement.<anonymous> (orphanController.js:1058)
at line number 888 this is my code:
//This is to clear the selectedNode of angular tree on modal close
_clearTreeSelection = function () {
$scope.orphanData.orphanText =
$scope.orphanData.orphan.attributes.text;//This is line no.888
if ($scope.OntologyTree && $scope.OntologyTree.currentNode) {
$scope.OntologyTree.currentNode = null;
}
};
at line number 659 this is my code:
$scope.clearSelection = function () {
_clearTreeSelection();//line no.659
_clearGazetteerSelection();
};
at line number 1058 this is my code:
_modal.on('hidden.bs.modal', function () {
$scope.suggestionListSearchText = '';
$scope.clearSelection();// line no. 1058
});
}
I have checked all over stackoverflow, i cant find the suitable solution for this problem.

This means that your $scope.orphanData.orphan is undefined. Find where have you declared this object and be sure that it refers to an object.

You are getting this error since you are trying to access a property on a object but that object does not exist. You should first make sure that orphan property actually exists as an object so that you can access attributes property on it.
Changes you need to make:
$scope.orphanData.orphan = {'attributes': {}}

adding a custom jquery.validation method results in Uncaught TypeError: Cannot read property 'call' of undefined

I am battling to get jquery.validation to work with a custom method.
I am trying this
$.validator.addMethod("validateMe", function (value, element) {
alert("validate");
});
$( "#myTextBox" ).rules( "add", {
validateMe: true
});
I am using jquery.validate v1.12 but when trying to validate I get an error of
Uncaught TypeError: Cannot read property 'call' of undefined
Am I missing something here?

If anyone else has the same problem it turns out I wasnt providing a message
$.validator.addMethod("validateMe", function (value, element) {
alert("validate");
}, 'Hello message!');
did the trick