5

I am a newbie to javascript, so forgive my naiveté here. I have discovered a behavior that appears to be inconsistent, at least to me. In doing some testing I put in the following two lines of code:

console.log(document.getElementById("errorMessage"));
window.alert(document.getElementById("errorMessage"));

I was fully expecting both to give me the same result, but no, I didn't.

console.log(document.getElementById("errorMessage"));

gave me:

    <span id="errorMessage">

whereas

window.alert(document.getElementById("errorMessage"));

gave me the alert window with:

    [Object HTMLSpanElement]

Can anyone help me understand why I got different results even though I passed the exact same arguments?

Added note: This is not a duplicate question, for the one referenced above asks which is better, and not what is the difference between the two.

Michael Sheaver
  • 2,059
  • 5
  • 25
  • 38
  • 2
    Those are the same result. console describes objects, alert is not so clever. – Popnoodles Dec 05 '13 at 02:06
  • @PSL This isn't exactly a duplicate of said question. That one has to do with why `console.log()` is better than `alert()`. – Rob Dec 05 '13 at 02:07

4 Answers4

3

console.log is allowed to do "whatever the browser developer tools wish to do". As a result, console.log is only suitable for live debugging and behaves differently in Firefox, Chrome and IE (in IE it will display the same text as the alert).

Now, alert works consistently because it treats the input as a string and applies the [[ToString]] conversion as required. On a DOM element - which uses toString() for the conversion - this is not very exciting, and ends up as the string "[Object blahblah]" as noticed. (I believe the exact text may vary by browser.)

It's easy to get the same behavior with console.log by forcing the element to a string manually:

console.log("" + document.getElementById("errorMessage"))

However, the inverse is not true and, while it could be somewhat emulated by showing the "outer HTML" in the alert, the console.log behavior result is simply (wonderful) magic in certain developer tools.

This magic is what allows Chrome to provide "live inspection" of objects (including DOM elements) that are supplied to console.log. However, as mentioned above, IE's console.log (at least up to IE10) also forces the value to a string.. which is not so magical and quite much like the alert.

While alert can be used for "quick debugging", I'd recommend using debugger, console.log, and the break-point/exception support provided by the appropriate developer tools as they are much more suited to the task at hand.

Community
  • 1
  • 1
user2864740
  • 60,010
  • 15
  • 145
  • 220
1

In fact the tow methods give you the same result, just your console perform a parsing to the SpanElement, and show more details.

imanis_tn
  • 1,150
  • 1
  • 12
  • 33
1

console.log will read and dump the contents of what it's receiving as an argument (object, array or string) whereas window.alert will just get the string value of the argument.

Charlie Affumigato
  • 1,017
  • 1
  • 7
  • 10
0

alert() converts the object passed to it into a string using the object's toString() method. Unlike alert(), console.log() is not only limited to displaying a simple string but also allow you to interact with the object passed to it. For example letting you inspect its properties.

http://blogs.msdn.com/b/cdndevs/archive/2011/05/26/console-log-say-goodbye-to-javascript-alerts-for-debugging.aspx

Ringo
  • 3,795
  • 3
  • 22
  • 37