Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2009
    Posts
    59
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Question [Help] - with innerHTML method...

    I'm trying to create a function that would return as JavaScript's innerHTML.

    PHP Code:
    function html_(htmlContent){
        return 
    this.innerHTML htmlContent;

    And this is how I'm trying to call it.

    PHP Code:
    document.getElementById('id').html_("some html content"); 
    I get this error:


    Uncaught TypeError: Object #<HTMLDivElement> has no method 'html_'
    (anonymous function)


    I know this works...

    PHP Code:
    document.getElementById('id').innerHTML "some html content"
    But I'm trying to shorten it.

    Thanks in advance,
    Matafy
    Last edited by matafy; 01-20-2013 at 02:43 AM.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    function html_(  id, htmlContent )
    {
      document.getElementById( id ).innerHTML = htmlContent;
    }

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Probably easier to shorten by adding one function that can be reused many times.

    Code:
    function $_(IDS) { return document.getElementById(IDS); }
    Then you would be able to change the innerHTML property of an element like this.
    Code:
    <div id="divBox1">Original content</div>
    <div id="divBox2">Original display</div>
    
    ...
    
    $_('divBox1').innerHTML = 'some html content replacing original display';
    $_('divBox2').innerHTML += 'some different html content added to existing display';

  • #4
    New Coder
    Join Date
    Apr 2009
    Posts
    59
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Thanks for the response....

    I made the docment.getElementByID reusable...

    PHP Code:
    function $_(id){
       return 
    document.getElementById(id);
    }
    function 
    html_(c){
       return 
    this.innerHTML c;

    I called it...

    PHP Code:
    $_('divBox1').html_("some html content"); 
    Still get the error message. I'm trying to stay away from jQuery

    I understand that I can use it like Logic Ali mentioned...

    PHP Code:
    html_($_('divBox1'), "some html content"); 
    But I would like to concatenate it.
    Last edited by matafy; 01-20-2013 at 04:09 AM.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,232
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    You can *NOT* just ARBITRARILY apply a method to a DOM object. Or to any object, for that matter.

    *IF* the object in question was a true JavaScript object, you could alter its prototype to add the method. But because it is a DOM object, and because the DOM is *ACTUALLY* implemented in native code under the covers, not at all in JavaScript, there is no way to directly add methods to DOM objects.

    You *could* create a JavaScript "wrapper" object for your DOM objects. You might, for example, create one wrapper for all the DOM objects that indeed have an innerHTML property (you'd surely want a different wrapper for fields that instead have a value property, for example).

    Maybe something like this:
    Code:
    // constructor for a wrapper for an object with innerHTML property:
    function htmlObj( objOrId )
    {
        // if a string is passed as the argument, assume it is an ID
        if ( typeof(objOrId) == "string" ) {
            this.domObj = document.getElementById(objOrId);
        } else {
            // otherwise assume it's a DOM object
            // (not the best assumption to make, but this is a silly demo)
            this.domObj = objOrId;
        }
        this.html = function( html ) 
        { 
            // if the argument is non-null, change the DOM object's innerHTML
            if ( html != null ) { this.domObj.innerHTML = html; }
            // and not matter what, always return its innerHTML
            return this.domObj.innerHTML;
        }
    }
    
    var box1 = new htmlObj( "divBox1" );
    box1.html( "some html content" ); // pass non-null to set the innerHTML
    // or 
    alert( box1.html() ); // pass null or no arg to GET the innerHTML
    Truthfully, I think that's more trouble than it is worth, but up to you.
    Last edited by Old Pedant; 01-20-2013 at 07:14 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    matafy (01-20-2013)

  • #6
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,350
    Thanks
    13
    Thanked 349 Times in 345 Posts
    an option to call the html_() function were:
    PHP Code:
    html_.call($_('divBox1'), "some html content"); 
    though whether that is sensible is another question.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #7
    New Coder
    Join Date
    Apr 2009
    Posts
    59
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Code:
    // constructor for a wrapper for an object with innerHTML property:
    function htmlObj( objOrId )
    {
        // if a string is passed as the argument, assume it is an ID
        if ( typeof(objOrId) == "string" ) {
            this.domObj = document.getElementById(objOrId);
        } else {
            // otherwise assume it's a DOM object
            // (not the best assumption to make, but this is a silly demo)
            this.domObj = objOrId;
        }
        this.html = function( html ) 
        { 
            // if the argument is non-null, change the DOM object's innerHTML
            if ( html != null ) { this.domObj.innerHTML = html; }
            // and not matter what, always return its innerHTML
            return this.domObj.innerHTML;
        }
    }
    
    var box1 = new htmlObj( "divBox1" );
    box1.html( "some html content" ); // pass non-null to set the innerHTML
    // or 
    alert( box1.html() ); // pass null or no arg to GET the innerHTML


    This looks like more than headache for me. I appreciate the help Old Pedant.

    This is what I ended up doing for now or at least for when I get more coding experience...

    PHP Code:
    function $_(e){

        var 
    hash e.match("#");
        var 
    dot e.match(".");
        var 
    _id e.replace(/#/g, "");
        
    var _class e.replace(/./g"");

        if(
    hash == "#"){
            return 
    document.getElementById(_id);
        } else if(
    dot == "."){
            if(
    document.getElementsByClassName(_class) == _class){
                return 
    document.getElementsByClassName(_class);
            } else {
                
    document.getElementsByClass = function(_class){
                    var 
    cName = [];
                    var 
    tagName document.getElementsByTagName('*');
                    for(var 
    i=0i<tagName.lengthi++){
                        if(
    tagName[i].className == _class){
                            
    cName.push(tagName[i]);
                        }
                    }
                    return 
    cName;
                }
                return 
    document.getElementsByClass(_class)[0];
            }
        }
    }
    function 
    html_(elementhtmlContent){
        
    element.innerHTML htmlContent;
    }

    html_($_('.class'), "Some Content"); 
    Thanks everyone!

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    You did not follow my directions in post #3 with this modification you made in post #4 ...
    Code:
    function $_(id){
       return document.getElementById(id);
    }
    function html_(c){
       return this.innerHTML = c;
    }
    The 'this' in your return is not the element you are trying to modify.


  •  

    Posting Permissions

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