Why can't I assign a Javascript object to a DOM element?

Question

This is my code:

<input id="input_with_id" type="text" value="hello" disabled>
<script type="text/javascript">
     input_with_id = {type:"checkbox", value:"bye", disabled:false}
</script>

IE 8 shows me this error message: "This object does not manage this property or this method". But if I use this code, it works like it should:

<script type="text/javascript">
     var my_var = new Object();
     my_var = {a:"x", b:"y", c:"z"}
</script>

The only difference between these two codes is that in I'm trying to reassign a DOM element to a Javascript object which has the same structure as a DOM element and in the other one I'm reassigning a Javascript object to another Javascript object. Why can't you treat the DOM element like a Javascript object here although normally they work similarly?

possible duplicate of [Do DOM tree elements with ids become global variables?](http://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables) — Cᴏʀʏ, Dec 04 '14 at 18:40
What method are you trying to use? JS objects do not have an DOM counterpart per-se. Maybe you're omitting additional info on some plugins you might be using to create DOM elements from JS objects? Anyway, you're missing a `var` statement which may cause hiccups on IE. — Armin Cifuentes, Dec 04 '14 at 18:42

score 3 · Accepted Answer · answered Dec 04 '14 at 18:39

3

var my_var = new Object(); my_var = {...}; is not exactly "normal" either. You're creating a completely new object and throwing away the first one that you created with new Object.

IE8 just doesn't like you "throwing away" a DOM element.

To put it simply, you're getting an error message because you're doing it wrong.

answered Dec 04 '14 at 18:39

Niet the Dark Absol

320,036
81
464
592

Yup, with each `my_var = ` you're **overwriting** `my_var` – Armin Cifuentes Dec 04 '14 at 18:44

scunliffe · Answer 2 · 2014-12-04T18:48:24.950

2

Attempting to use the "Auto Global" (referencing an element by its ID or Name) isn't recommended. (dealing with naming collisions is a pain point)

In addition, IE8 (and below) in particular do not allow you to change the type or name(IE7-) attributes dynamically (they were considered read-only)

In your case, if you want to manipulate the field, just use regular JavaScript (or your favorite JS library)

e.g.

<script>
  var myElem = document.getElementbyId('input_with_id');
  myElem.type = 'checkbox';
  myElem.value = 'bye';
  myElem.disabled = false;
</script>

(keeping in mind that this still won't work in IE8 due to the type attribute being read-only - (it was fixed in IE9 (when running in Standards Mode)))

edited Dec 04 '14 at 18:48

answered Dec 04 '14 at 18:41

scunliffe

62,582
25
126
161

The `type` attribute is only read-only if the element has been attached to the document. You can freely set `.type` *before* appending the element to the page. – Niet the Dark Absol Dec 04 '14 at 18:46
@NiettheDarkAbsol correct... in this case the element *was* added to the DOM (or I can only presume it was) thus it would be read-only in IE8. :-( – scunliffe Dec 04 '14 at 18:49

Why can't I assign a Javascript object to a DOM element?

2 Answers2