What is the difference between document.getElementById('mybox') and mybox? [duplicate] - javascript

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
document.getElementById(“someId”) Vs. someId
For example I have an element with id="mybox" attribute, is there any difference between calling it with document.getElementById('mybox') and mybox directly, as I see both work same in most browsers? The jsfiddle shows live example http://jsfiddle.net/usmanhalalit/TmS3k/
If there is no difference then why document.getElementById('mybox') is so popular, is it a bad practice to call mybox directly?

Some browsers in some rendering modes will create a global variable for each element with an id.
It is non-standard, won't work everywhere and definitely can't be depended upon.

They don't "both work the same". IE introduced making element ids into global variables, other browsers copied it to some extent but don't fully support it. It's considered a very bad idea, just don't do it.

mybox.value does not work in most cases. I believe IE is the only browser (and only some versions of it) that would support it. In my Firefox browser, I get mybox not defined error message in the console.

Related

Var with {} break IE 11 [duplicate]

This question already has answers here:
IE 11 throws js breaking error 1010 unexpectedly in the middle of a tab to <h1> element
(1 answer)
function animate({ draw1, duration1 }) {... causes expected identifier (script1010) error in IE11 - Object Destructuring support in IE [duplicate]
(1 answer)
Closed 2 years ago.
Im having an issue using slideToggle as a variable on my website. Im using domSlider. When I try the following I get issues I cannot understand.
If define slideToggle as:
var {slideToggle} = window.domSlider;
I get SCRIPT1010: Expected identifier in IE 11. But works in Chrome and modern browsers.
And if I define it as:
var slideToggle = window.domSlider;
I get Uncaught TypeError: slideToggle is not a function In chrome and other modern browsers. But no errors in IE 11.
I dont know what is causing this, and how to move on from here.
IE11 doesn't support destructuring assignment: Browser_compatibility
var { slideToggle } = window.domSlider;
would be:
var slideToggle = window.domSlider.slideToggle;
to work in IE11, or you can just use window.domSlider.slideToggle directly
The var { item } = func() construct is called destructuring. The older Redmond Middle School Science Project (IE11) doesn't support it; it's from a javascript version that came after they stopped working on IE.
If you're targeting IE, scroll to the bottom of the MDN page describing the feature. For your example, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment# It says which browsers support the feature.
There's also a site called CanIUse.com with information, feature by feature, about browser support.
There's a transpiler (a compiler that turns new javascript into old) called Babel. You could try that. But explaining how to rig it in your project is too much for a SO answer.
Welcome to the wonderful world of developing code for bad legacy browsers. There's a good reason for Microsoft abandoning their own browser development and adopting Chromium.

function animate({ draw1, duration1 }) {... causes expected identifier (script1010) error in IE11 - Object Destructuring support in IE [duplicate]

This question already has answers here:
Support for ES6 in Internet Explorer 11
(1 answer)
IE11 gives SCRIPT1002 error when defining class in javascript
(3 answers)
Closed 4 years ago.
I am having issues with a site build where the page is not displaying properly in IE11. The site displays correctly in chrome, firefox, and edge.
The error seems to break all the javascript from the file of the error. The file is responsible for handling parts of the layout, so when it fails it causes various sections on the page to not render properly.
The error message is "Script1010" and points to the following line of code:
function animate({ draw, duration }) {
...
}
I've not been able to identify why IE cannot process this line. The closest thing to answer I've seen is the following post that suggests that "draw" or "duration" might be reserved words in IE. But changing them caused the same error to occur.
Any suggestions or pointers?
EDIT: Thanks for the replies. Figured I would clarify the question as a foot note for similar searches, or even just for myself. As pointed out below, the question boils down to "Does IE support ES6 object destructuring?". Turns out object destructuring does not work in IE.
You are using ES6 to destructure the arguments. Internet Explorer does not support ES6.
You'll either have to rewrite it using ES5 or use a transpiler like Babel to transpile your code into ES5.
EDIT: If this is the only occurrence of ES6, I'd suggest rewriting it, but otherwise I'd use Babel.
function animate(arg) {
var draw = arg.draw
var duration = arg.duration
...
}

Where can i find the code source of javascript functions? [duplicate]

This question already has answers here:
Where can I find javascript native functions source code? [duplicate]
(3 answers)
Closed 1 year ago.
For example, i want to know how the querySelector method was built. I checked on MDN but there's only examples that show how to use it.
I also tried to check in the console.log but nothing readable.
There is a non-standard method to do this. Please be aware that it is not fully cross-browser compatible and shouldn't be used in a production environment.
function hello(){
return "Hi!";
}
console.log(hello.toSource());
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toSource for more.
Edit:
To see the source code of a built-in function, you will need to look at the engine source. This varies browser to browser. For example, Chrome uses the V8 engine. See https://github.com/v8/v8

document.querySelectorAll([classname]) not working in IE9 [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
IE9 equivalent of querySelectorAll
I'm trying to get all elements with the classname "video" in some JS running in IE9. I'm using var videopanels = document.querySelectorAll(".video"); which is working great in Chrome.
Unfortunately I'm getting this error when I watch document.querySelectorAll(".video") in the debugger:
document.querySelectorAll(".video")
Object doesn't support property or method 'querySelectorAll'
Error
However, when I watch document in the debugger (it shows up as a DispHTMLDocument) and open up the [Methods] list, I see
querySelectorAll()
querySelectorAll(v)
IHTMLDOMChildrenCollection
What's going on? How come I can see it in the debugger, but not (apparently) actually call or use it?
Change your doctype to html5 standards.
<!DOCTYPE html>
Also check IE9 isn't operating in compatibility mode as this may cause it to ignore some methods it supports.

How can i debug jquery object [duplicate]

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Debug Javascript
Every now and then i have one jquery object and i am not able to find whats inside it.
I had to try many combinations like see the class name , id and other attributes to see what is that variable and sometime by hiding it.
Is there any proper way of debugging the jquery object to see whats inside it?
Firebug, Internet Explorer Developer Toolbar, Chrome Developer Tools. These are some of the tools for some of the respective browsers.
Some IDES like eclipse let you debug inline.
Also there is a javascript statement : debugger;, which you can use for this purpose .
Using firebug or the chrome developer tools you can debug any javascript object.
You need to add a breakpoint just after the object initialization and then add the object to the watch panel.
Object members are displayed in a tree view.

Categories

Resources