Why can I bind a JavaScript Symbol to everything except the style property of an HTMLElement?
https://jsfiddle.net/elgs/ftj9zx42/3/
Here's the HTML:
<div id='a'></div>
Here's the Javascript:
const a = document.querySelector('#a');
a.classList._someSymbol = Symbol('some_symbol');
console.log(1);
a.style._someSymbol = Symbol('some_symbol');
console.log(2);
And here's the output:
1
(index):35 Uncaught TypeError: Cannot convert a Symbol value to a string
at window.onload ((index):35)
Update:
The whole story is I'm writing a proxy that will attach a Symbol to every property as identifier in the get trap, this unintentionally included the style. I will eventually include only the properties that I'm interested in, that won't include the style. But now I got this error and I'm curious why this happened.
It's browser dependent. As HTML is a standard (it is a series of guidelines on how a document should be interpreted by a user agent).
So, your above example does work in FireFox, but not in Google Chrome.
If you want to understand why, I recommend looking into the source code of your browser, which appears to be converting your symbol toString
🎈 Try this one:
const a = document.querySelector('#a');
a.classList._someSymbol = {};
a.classList._someSymbol = Symbol('some_symbol');
console.log(1);
a.style._someSymbol = {};
a.style._someSymbol = Symbol('some_symbol');
console.log(2);
I don't know why it works in this way 🤪.
Related
I got this error while executing my JS code in chrome console
Uncaught TypeError: Cannot read property 'children' of null
at getFollowers (<anonymous>:98:53)
at <anonymous>:57:7
My Function being
function getFollowers(){
var followersDiv = document.querySelector('div[role="presentation"]').querySelector('li').parentElement.children;
for (var i = 0;i<followersDiv.length;i++){
var tempUser = followersDiv[i].lastElementChild.children[0].children[1];
followers.push({
userID: tempUser.children[0].textContent,
userName: tempUser.children[1].textContent,
});
}
document.querySelector('[aria-label="Close"]').click();
}
The line seems to have missing something here
var tempUser = followersDiv[i].lastElementChild.children[0].children[1];
Can someone help me with this?
I would’n say that the line you’re pointing is missing something. I would say this given line expects things to be here without providing enough guarantees.
One way or another, tempUser is built trying to use something that can be null. In my opinion, your code is quite optimistic : you assume lastElementChild to be nonEmpty, to have a children field which is a non empty array, etc… Each step after "followersDiv[i]" may lead to failure, you did not check the values’ content.
There are two strategies to make your code more robust, IMO :
Use an external library like lodash to have a more robust code. In particular, you may use _.get and _.isEmpty
Try to use a more accurate CSS selector in your querySelector as I’m not sure you need to manually browse the DOM if your selector is good enough. This way, you won’t have nodes that don’t fit your expectations.
I am currently looking into some plugins of CKEditor. Here is the code I encountered:
var dummyElement = editor.document.createElement('span');
var obj = dummyElement.$;
The plugin comes from here.
What is .$ means for in this context? Does it also supported in jQuery or other libraries?
$ is a perfectly valid variable or property name so without digging into the source code (or docs) and seeing what is assigned there is no way to know from your snippet alone what it is used for
As seen here you can do anything with it
var obj ={ $: 'foo'}
alert(obj.$);// "foo"
I wrote this code:
AjxException.reportScriptError =
function(ex) {
if (AjxException.reportScriptErrors && AjxException.scriptErrorHandler && !(ex
instanceof AjxException)) {
AjxException.scriptErrorHandler(ex);
}
throw ex;
};
it's fine in all browsers including IE9,8 but I got this error in IE10:
SCRIPT5022: InvalidCharacterError
mentioned throw ex;
Why this happens in IE10 and how could I solve this?
eventually, I figured out what was wrong with the codes:
the javascript code was written for old versions of IE: IE7, IE8, IE9 and used this line:
var ninput = document.createElement(AjxEnv.isIE ? ["<INPUT type='",type,"'>"].join("") :
"INPUT");
in order to create INPUT element. it works fine in older versions of IE but not in IE10.
So, I had to use this one instead:
var ninput = document.createElement((AjxEnv.isIE && !AjxEnv.isIE10up)? ["<INPUT
type='",type,"'>"].join("") : "INPUT");
now, it's working.
Are your files saved without a BOM (Byte Order Mark)? Those can often throw off parsers and wreak havoc.
I'd also recommend chopping up your code in to as many lines as possible to determine which line has the issue and then remove it for testing purposes and that way you'll be able to quickly determine what the issue is.
For example you may be referring to an object of the wrong type (working with an array and the object happens to be a string for example) so if you remove an object and it works (or works slightly better) try alert('typeof myObject = '+typeof myObject); to give you some further insight.
Also it looks like you have multiple instances of ex, make sure you aren't using a string and a function both named ex.
I'm trying to use the jQuery SVG plugin to animate some stuff — scaling and whatnot. I'm totally new to SVG.
var params = {};
params['svgTransform'] = ['scale(1)', 'scale(1.5)'];
$('#TX', svg.root()).animate(params);
This is copied almost verbatim from the developer of the plugin.
Yet when it runs, I'm getting this:
4TypeError: 'undefined' is not a function (evaluating 'f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration)')
Any ideas?
I think you should check for existence of an element with ID="TX" in your SVG document.
Anyway, I must say that sometimes I found very difficult to remember where to code specific behaviour: there are so many choices, among XML (plain SVG), plain JavaScript+DOM (but what DOM?), jQuery specific, jQuery+SVG.... And all of these with their details... It's daunting! I hope it will be rewarding in the end.
BTW I found that Chrome give a good IDE to workout problems (I'm on Linux now...). Hit Ctrl+Shift+I to enter the debugger and see whatever error...
maybe it doesn't support array inside animate arg object. can you try :
var params = {};
params['svgTransform'] = 'scale(1.5)';
$('#TX', svg.root()).animate(params);
This is probably the beginning of many questions to come.
I have finished building my site and I was using Firefox to view and test the site. I am now IE fixing and am stuck at the first JavaScript error which only IE seems to be throwing a hissy about.
I run the IE 8 JavaScript debugger and get this:
Object doesn't support this property or method app.js, line 1 character 1
Source of app.js (first 5 lines):
var menu = {};
menu.current = "";
menu.first = true;
menu.titleBase = "";
menu.init = function(){...
I have tested the site in a Webkit browser and it works fine in that.
What can I do to fix this? The site is pretty jQuery intensive so i have given up any hope for getting it to work in IE6 but I would appreciate it working in all the others.
UPDATE: I have upload the latest version of my site to http://www.frankychanyau.com
In IE8, your code is causing jQuery to fail on this line
$("title").text(title);
in the menu.updateTitle() function. Doing a bit of research (i.e. searching with Google), it seems that you might have to use document.title with IE.
Your issue is (probably) here:
menu.updateTitle = function(hash){
var title = menu.titleBase + ": " + $(hash).data("title");
$("title").text(title); // IE fails on setting title property
};
I can't be bothered to track down why jQuery's text() method fails here, but it does. In any case, it's much simpler to not use it. There is a title property of the document object that is the content of the document's title element. It isn't marked readonly, so to set its value you can simply assign a new one:
document.title = title;
and IE is happy with that.
It is a good idea to directly access DOM properties wherever possible and not use jQuery's equivalent methods. Property access is less troublesome and (very much) faster, usually with less code.
Well, your line 1 certainly looks straight forward enough. Assuming the error line and number is not erroneous, it makes me think there is a hidden character in the first spot of your js file that is throwing IE for a fit. Try opening the file in another text editor that may support display of normally hidden characters. Sometimes copying/pasting the source into a super-basic text-editor, like Notepad, can sometimes strip out non-displayable characters and then save it back into place directly from Notepad.