1

Can I reduce

function n()
  {
  var a; 
  if(a = document.getElementById('fb0')) 
    {
    a.onclick = i0;
    document.getElementById('fb1').onclick = i1;
    }
  }

to

function n()
  {
  if(document.getElementById('fb0').onclick = i0) 
    {
    document.getElementById('fb1').onclick = i1;
    }
  }

I don't have a debugger right now. I know that document.getElementById('fb0') returns a value because the first snippet works fine. But does it need the assignment to be evaluated in the if statement?

Improve this question
1
  • 1
    Are you intentionally trying to do assignment in your conditional? Or is that a double equals error? Commented Jun 9, 2011 at 20:47

5 Answers 5

Reset to default
1

No, you can't.

document.getElementById('fb0'), as the function name already says, returns the html element with has the id equal to fb0. After that you are accessing the attribute onclick. But it the get fails it will break the script.

On the first scenario you test if the assignment works, if does it means the element exists and will only execute if it exists.

Those are different behaviors.

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

Comments

1

Not really; if getElementById('fb0') doesn't return anything your page will get an error, and in the first case it wouldn't.

Improve this answer

2 Comments

As a side note, I'd strongly recommend against using "tricks" for minimizing JS, including the assignment in the condition - that will likely cause headaches for maintenance later. You can use some JS minifier if you're worried about download size.
It removes some unnecessary spaces / comments, sometimes shortens variable names, and it can potentially (although I don't know if the existing ones do) apply some code changes which don't change the semantics of the program, all to reduce the size of the JS file. Some examples are at crockford.com/javascript/jsmin.html or aspnet.codeplex.com/releases/view/34488
1

To check if "document.getElementById('fb0')" returns an element or null, the second version don't do it and an error will be throw if there is no element with id "fb0". The second version is ok if you don't remove the "fb0" element from the DOM at some point.

Improve this answer

Comments

0

That would fail if document.getElementById('fb0') were not to exist. document.getElementById('fb0').onclick wouldn't mean much in that case.

Improve this answer

Comments

0

If you do a lot of DOM selection by ID, make a shortened version of that method:

function byId( id ) { return document.getElementById(id); };

function n() {
  var a; 
  if(a = byId('fb0')) {
    a.onclick = i0;
    byId('fb1').onclick = i1;
  }
}

In this case, doing the assignment inside the condition doesn't save you any characters. It's the same length to do it with the declaration.

function byId( id ) { return document.getElementById(id); };

function n() {
  var a = byId('fb0'); 
  if(a) {
    a.onclick = i0;
    byId('fb1').onclick = i1;
  }
}
Improve this answer

2 Comments

You have to weigh the cost of a second function vs. characters saved. Correct?
@Chris Aaker: Absolutely. But unless you're doing some insane DOM selection in a loop or something, you'll never notice the difference. And in my opinion, you should really just use that method once for any given element. If that same element is needed again, you should cache the result. So for example if some element is fetched in a function, you'd cache it the first time the function is invoked, and subsequent invocations would use the cached element.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.