Modifying node within object in javascript

Question

I was a little confused about how to access the property className of a created Node object?

 var track = {
  mod: {
    el: document.body.appendChild(document.createElement('div')),
    el.className: 'w3-container w3-teal w3-hover-green'
  }
};

This, unfortunately, provides the error:

Uncaught SyntaxError: Unexpected token .

I am trying to simply create an object within an object and modify properties of the internal object. I searched around and did not find anything specific to this level of access as I need the actual property of the DOM element 'className' to be modified and not just an assigned property of className.

Possible duplicate of Adding a custom variable as JSON attribute — Aᴍɪʀ
– Aᴍɪʀ, Commented Nov 1, 2016 at 18:04
> I am trying to simply create an object within an object and modify properties of the internal object - not possible directly. But you can always modify the original object. — raina77ow
– raina77ow, Commented Nov 1, 2016 at 18:05
You can't access the object properties while the object is still being created. You'll have to do track.mod.el.className = 'w3-container w3-teal w3-hover-green' later. — JJJ
– JJJ, Commented Nov 1, 2016 at 18:10
Create an IIFE to create an element, and set the needed properties, then return the newly-created element. Note, that this can't be used in the IIFE to refer mod. — Teemu
– Teemu, Commented Nov 1, 2016 at 18:10
So if I wanted to create a genericized track object I would have to wrap a function around the object creation to assign values after creation? — goetztyler
– goetztyler, Commented Nov 1, 2016 at 18:11

user3254198 · Accepted Answer · 2016-11-01 18:13:56Z

1

What you're trying to do there is pretty neat but sadly JavaScript doesn't have support for it out of the box.

This is one way you can still make it work though:

var track = {
  mod: {
    el: document.body.appendChild(document.createElement('div'))
  }
};

// Add the className property here
track.mod.el.className = 'w3-container w3-teal w3-hover-green';

answered Nov 1, 2016 at 18:13

user3254198

7596 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Teemu · Accepted Answer · 2016-11-01 18:22:20Z

0

You can use an Immediately Invoked Function Expression, like so:

 var track = {
  mod: {
    el: (function () {
      var el = document.body.appendChild(document.createElement('div'));
      el.className = 'w3-container w3-teal w3-hover-green';
      return el;
    }())
  }
};

This can be done only after body exists, ofcourse. Also, this will not refer to track or track.mod in the function.

edited Nov 1, 2016 at 18:22

answered Nov 1, 2016 at 18:18

Teemu

23.5k7 gold badges61 silver badges113 bronze badges

2 Comments

VLAZ Over a year ago

I agree you could do that and it's a fairly clean solution, overall, however, it still seems like putting too much logic in once place. I don't see a good reason to have object creation and DOM manipulation done at once. It may save around a line of code, but it seems better to have them separate.

goetztyler Over a year ago

In this situation I am trying to create a genericized track object that I can then modify later depending on what I need. Although it is a bit of convolution it does do what I need it to do without requiring me to create and modify the track object every time I need a generic track.

Phillip Chan · Accepted Answer · 2016-11-01 18:11:36Z

0

Seems like just a syntax issue...wouldn't it be:

var track = {
  mod: {
    el: document.body.appendChild(document.createElement('div')),
    el: {
        className: 'w3-container w3-teal w3-hover-green'
    }
  }
};

answered Nov 1, 2016 at 18:11

Phillip Chan

9837 silver badges17 bronze badges

3 Comments

Teemu Over a year ago

This would just override the assigned value of mod.el.

VLAZ Over a year ago

That doesn't seem correct - this will create and append an element on line 3, then also add it as a reference to the el property but the very next line will overwrite that reference.

user3254198 Over a year ago

That'll override the el object getting rid of the div element.

Collectives™ on Stack Overflow

Modifying node within object in javascript

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related