SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 33 of 33
  1. #26
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I know.... I just wanted the challenge of doing everything with plain JS... but this code is great as there are things here about the use of innerHTML I didn't k now...

    such as:

    1) they only work in this example if you do document.querySelector('#content').innerHTML += ', '; and not if you do

    $('#content').innerHTML += ', ';

    (????..... I'm still loading the core jQuery...)


    2) had no idea you could do innerHTML += (as opposed to just innerHTML = )
    of course this is very useful....


    3) had no idea you have to enclose value in '()' ( but only if you're printing a strings and vars..... if you're printing just a string this works fine....

    .innerHTML += ', ';


    just learned three new things about innerHTML.... ;~))

    thanks again, people... you folks are the best...

  2. #27
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    3) had no idea you have to enclose value in '()'
    Well you don't have to, but what with all of those plusses and equal signs in the code, it helps to make it easier to understand what is going on, doesn't it?

    Compare:

    Code javascript:
    document.querySelector('#content').innerHTML += prop + " = " + obj[prop] + '<br>';

    with:

    Code javascript:
    document.querySelector('#content').innerHTML += (prop + " = " + obj[prop] + '<br>');

    It could though be even clearer what's going on by assigning it to a variable:

    Code javascript:
    var content = prop + " = " + obj[prop] + '<br>';
    document.querySelector('#content').innerHTML += content;

    All three do exactly the same job - what's important with them is how clearly they communicate with you, the person dealing with the code, about their intent.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #28
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    again, thank you so much, Paul...

    yes of course assigning the content to a var would be the best in a real situation....

    ("innerHTML" is kind of funky... it's like a var and a method at the same time....;-)

    thanks again and enjoy the rest of your day....

  4. #29
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    had no idea you have to enclose value in '()'
    Well you don't have to, but what with all of those plusses and equal signs in the code, it helps to make it easier to understand what is going on, doesn't it?

    yes, it is easier, of course, to enclose those composed strings in parens...
    (I didn't realize it was optional...)

    so Paul,

    why does only this work?

    Code:
     document.querySelector('#content').innerHTML += (prop  + ': ' );
    and not this?

    Code:
     $('#content').innerHTML += (prop  + ': ' );
    ( document.querySelector??? not document.jquerySelector???? ;-)


    thank you again.....



    PS:
    I discovered a very useful method.......

    Code:
     Object.keys(myObj);
    returns all keys in an object as an array.... very cool....
    (to do things like test if are you on last key-val pair... very useful....:-)

  5. #30
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,397
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by maya90 View Post
    why does only this work?

    Code:
     document.querySelector('#content').innerHTML += (prop  + ': ' );
    and not this?

    Code:
     $('#content').innerHTML += (prop  + ': ' );
    When you use jQuery to get elements from the DOM, it returns them wrapped in an object which provides all the jQuery methods you're used to. It doesn't give you direct access to properties like innerHTML, as it expects you to set that through its .html() method.

    You could access the underlying node though, and set the innerHTML property, like this:
    Code JavaScript:
    $('#content')[0].innerHTML += (prop  + ': ' );

  6. #31
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    why does only this work?
    As said, the $ object gives you a jQuery object. innerHTML is available only on actual element references.

    jQuery does provide html methods though, which can be seen on their DOM insertion inside category, so you could do this instead:

    Code javascript:
    $('#content').append(prop  + ': ' );
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #32
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,397
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hey maya90,

    I came across another resource over the weekend that I think you might find interesting: http://www.objectplayground.com/

    There's a video explaining, in some detail, how objects, prototypes and inheritance work in JS. There's also a section at the bottom of the page where you can enter your own code and it will visualize the prototype chain for you.

  8. #33
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    815
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you very much, fretburner.... :-)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •