Compress code for multiple events in javascript

Question

Can this be done in any better way or must i type "object.event = function" for all?

namn1.onfocus = clearField;
foretag1.onfocus = clearField;
telefon1.onfocus = clearField;
hemsida1.onfocus = clearField;
meddelande1.onfocus = clearField;
namn2.onfocus = clearField;
foretag2.onfocus = clearField;
telefon2.onfocus = clearField;
hemsida2.onfocus = clearField;
meddelande2.onfocus = clearField;

namn1.onblur = restoreField;
foretag1.onblur = restoreField;
telefon1.onblur = restoreField;
hemsida1.onblur = restoreField;
meddelande1.onblur = restoreField;    
namn2.onblur = restoreField;
foretag2.onblur = restoreField;
telefon2.onblur = restoreField;
hemsida2.onblur = restoreField;
meddelande2.onblur = restoreField;

i also don't want to add classes, I want to work with id's... — user1087110, Aug 22 '12 at 19:48

score 4 · Accepted Answer · answered Aug 22 '12 at 19:49

4

You could do something like this, but it's not that much better:

var fields = [
    namn1, foretag1, telefon1, hemsida1, meddelande1,
    namn2, foretag2, telefon2, hemsida2, meddelande2
];

for (var i = 0; i < fields.length; i++) {
    fields[i].onfocus = clearField;
    fields[i].onblur = restoreField;
}

jQuery would give you more control, but I don't know if you want to use it.

answered Aug 22 '12 at 19:49

Sean Bright

118,630
17
138
146

+1 Beat me to it. Could also make it a function that takes in an array of objects – Nick Aug 22 '12 at 19:50

score 0 · Answer 2 · answered Aug 22 '12 at 19:49

0

var elements = [namn1, foretag1, telefon1, hemsida1, meddelande1, namn2, foretag2, telefon2, hemsida2, meddelande2];
for (var i in elements) {
    elements[i].onfocus = clearField;
    elements[i].onblur = restoreField;
}

This could be made even more concise if these elements could be accessible by ID — then, one could halve the array by getting the each pair of elements.

answered Aug 22 '12 at 19:49

Waleed Khan

11,426
6
39
70

You should not use `for ... in` to iterate over the items in an array. It is meant to iterate over the properties of an object, and the result may not be what you expect. Use an indexed `for` loop instead. – Frédéric Hamidi Aug 22 '12 at 19:50
@Sean, [it's already there](http://stackoverflow.com/questions/500504/javascript-for-in-with-arrays) :) – Frédéric Hamidi Aug 22 '12 at 19:53

score 0 · Answer 3 · answered Aug 22 '12 at 19:51

0

[namn1, foretag1, telefon1, hemsida1, meddelande1,
 namn2, foretag2, telefon2, hemsida2, meddelande2].forEach(function(e) {
  e.onfocus = clearField;
  e.onblur = restoreField;
});

answered Aug 22 '12 at 19:51

David G

94,763
41
167
253

Nice. The only minor nit is that it won't work in IE8 or lower, but who uses that anyway? – Sean Bright Aug 22 '12 at 20:13

score 0 · Answer 4 · answered Aug 22 '12 at 19:57

Just a tiny variation on Sean's answer because I like this method of creating arrays.

var fields = "namn1 foretag1 telefon1 hemsida1 meddeland1 namn2 foretag2 telefon2 hemsida2 meddelande2".split(" ");

for(i=0; i<fields.length; i++){
   fields[i].onfocus = clearField;
   fields[i].onblur = restoreField;
}

Compress code for multiple events in javascript

4 Answers4