is this valid js oop?

Question

I am wondering if it is okay to put html dom references in js oop. Although there are many JS OOP tutorials online, I haven't seen anything similar to what I am referring to. The code below is what I am referring to.

var form = {
  fname : document.getElementById("fname").value;
};

say, for example the document.getElementById("fname").value is a textbox with a value of "jacob". would form.fname = "jacob"?

is this okay to do? is this a common practice to do?

score 0 · Answer 1 · answered Jun 27 '12 at 05:48

you can do it if the object was created after the load event so you can make sure that the element "fname" is initialized ... for example...

$(document).ready(function(){
   var form = {
     fname : document.getElementById("fname").value;
    };
});

if you dont want to use jQuery here is another example ...

window.addEvent('load',function(){
  //your object ...
  });

g.d.d.c · Accepted Answer · 2012-06-27T06:07:56.120

I am not sure what you're trying to accomplish here. If you only need to retrieve the value that is currently in the input field, one time, ever, then this ought to be fine. If you're expecting the value of form.fname to continually update when the input value changes, you're not going to see that happen. You'd either need some handler tied to the change event of the input, or you'd need to do something more like this:

var form = {
  fname: function () {
    return document.getElementById('fname').value;
  }
};

// Retrieving
form.fname()

Note that you have to invoke the fname function now, you can't simply refer to it as form.fname.

If you really don't want to ever have to retype things ever, do something like this:

var fields = ['fname', 'lname', 'city', 'state'];
var form = {};
for (var i = 0, j = fields.length; i < j; ++i) {
  form[fields[i]] = function () {
    return document.getElementById(fields[i]).value;
  }
}

You'll have to be a little bit more careful with that if you add things like dropdown lists to your form, because their .value isn't as helpful, but you don't retype names if one changes.

And, if we really want to be fancy about it, you don't even have to type names when you get the values:

for (var i = 0, j = fields.length; i < j; ++i) {
  console.log(form[fields[i]]())
}

so, would you say its best to add return when getting the form field values? — JaPerk14, Jun 27 '12 at 05:49
That's isn't long lived or reliable solution, it depends on element's id value to be `fname` always. If that changes, that code will fail unless you retype it. Retyping in OOP, that's not what OOP is. — Blaster, Jun 27 '12 at 05:58
@JaPerk14 - It depends on what you want to see happen. If you have a function somewhere that's going to create this variable on demand in response to some event you probably don't need the function approach and what you provided is fine. If `form` is a global variable defined once, but you always want the current values, then you need this approach. — g.d.d.c, Jun 27 '12 at 06:00

is this valid js oop?

2 Answers2