I am trying to jQuery-like script that supports selectors, show, hide, text, and html methods. Running a test, no matter which method I call, it always throws a custom "No Element Selected" error. How do I fix this? The full code is here --> https://jsfiddle.net/7ado13vg/
The relevant code is below
var storingAttributes = {};
class MONEY {
constructer(string) {
try {
//check for action
if (string != null) {
//Check Selection Type
storingAttributes.selectorArray = string.split('')
if (storingAttributes.selectorArray[0] == '#') {
storingAttributes.selectionType = 'id';
storingAttributes.selectorArray.splice(0, 1);
}
if (storingAttributes.selectorArray[0] == '.') {
storingAttributes.selectionType = 'class';
storingAttributes.selectorArray.splice(0, 1);
}
if (storingAttributes.selectorArray[0] != '#' && storingAttributes.selectorArray[0] != '.') {
storingAttributes.selectionType = 'tag';
}
//Select Elem
if (storingAttributes.selectionType == 'id') {
storingAttributes.selectedElem = document.querySelector(string);
}
if (storingAttributes.selectionType == 'class') {
storingAttributes.selectedElem = document.querySelectorAll(string);
}
if (storingAttributes.selectionType == 'tag') {
storingAttributes.selectedElem = document.querySelectorAll(string);
}
}
} catch (error) {
}
}
//The reason I checked what was being selected is because querySelectorAll returns an array, and I do not believe that ids are supported
//trying to use my method 'show'
show() {
try {
if (typeof storingAttributes.selectedElem == 'undefined' || storingAttributes.selectedElem == null) {
throw "No Element Selected";
} else {
if (storingAttributes.selectionType == 'tag') {
for (n = 0; n < storingAttributes.selectedElem.length; ++n) {
storingAttributes.selectedElem[n].style.display = 'block';
}
return;
}
if (storingAttributes.selectionType == 'class') {
for (n = 0; n < storingAttributes.selectedElem.length; ++n) {
storingAttributes.selectedElem[n].style.display = 'block';
}
return;
}
if (storingAttributes.selectionType == 'id') {
storingAttributes.selectedElem.style.display = 'block';
return;
}
}
} catch (e) {
console.log(e);
}
}
}
As you can see, the constructor simply assigns/initializes a value for selectionType, selectedElem, and selectorArray in the object storingAttributes
When you log storingAttributes, it returns an empty object.
The following replaces the code you've posted to show how much simpler it can be written and without erroneously using try/catch.
I understand that it doesn't answer your question, but the code you are working with is really so unnecessarily excessive, it's hard to sift through it to find your problem without refactoring it. Simpler code is easier to debug.
var storingAttributes = {};
// Just test for the non-existance of a value
if (!storingAttributes.selectedElem) {
throw "No Element Selected";
} else {
// switch is more concise when you have a single value to
// check against multiple possible values
switch (storingAttributes.selectionType){
case "tag":
// And since you want to do the exact same code if
// it's "tag" or "class", we'll allow fall through here
case "class":
// The Array.prototype.forEach method makes looping much simpler
storingAttributes.selectedElem.forEach(function(item){
item.classList.add("block");
});
break;
case "id":
storingAttributes.selectedElem.classList.add("block");
}
}/* Avoid inline styles which lead to duplication of code.
Instead, use CSS classes where possible. */
.block { display:block; }