www.webdeveloper.com
Results 1 to 13 of 13

Thread: innerHTML not working

  1. #1
    Join Date
    Oct 2009
    Posts
    12

    innerHTML not working

    Hello,
    I'm using document.nodeName.innerHTML to change the content of a particular node. It is not working in my case. Can someone please let me know where I've went wrong. Please find the attached HTML file. Thanks in advance.

    Thanks,
    Apps

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb Consider this ...

    Missing HTML code, but may try one of these suggestions.

    1. document.[formname].elementName.innerHTML = ???
    or
    2. document.getElementById('IDS').innerHTML = ???

    where:
    [formname] is the name of the form
    and
    IDS is the ID of the element holding the information.

  3. #3
    Join Date
    Oct 2009
    Posts
    12
    Thank you very much for your kind reply.I've used innerHTML in the same way as you suggested.
    Please find the attached HTML source file.
    Attached Files Attached Files

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Typo:
    Code:
    document.getElementById('Aircraft').innnerHTML="Remove from Favorite";
    You have written an extra n

  5. #5
    Join Date
    Aug 2007
    Posts
    3,767
    Quote Originally Posted by JMRKER View Post
    1. document.[formname].elementName.innerHTML = ???
    Slight typo there. That should be document[formname].elementName.innerHTML, there is no fullstop after document.
    Great wit and madness are near allied, and fine a line their bounds divide.

  6. #6
    Join Date
    Oct 2009
    Posts
    12
    Quote Originally Posted by Kor View Post
    Typo:
    Code:
    document.getElementById('Aircraft').innnerHTML="Remove from Favorite";
    You have written an extra n
    Thank you very much for pointing out that. I don't know why Mozilla and IE didn't fire any JS errors.

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by AppsWorld View Post
    I don't know why Mozilla and IE didn't fire any JS errors.
    Because any JS interpreter will consider that as a simple assignment and innnerHTML as a custom property. You have simply created a new property and give it a value.

    It is perfect legal, isn't it?
    Code:
    object.myCustomProperty="somevalue";
    Last edited by Kor; 11-11-2009 at 03:10 AM.

  8. #8
    Join Date
    Oct 2009
    Posts
    12
    Quote Originally Posted by Kor View Post
    Because any JS interpreter will consider that as a simple assignment and innnerHTML as a custom property. You have simply created a new property and give it a value.

    It is perfect legal, isn't it?
    Code:
    object.myCustomProperty="somevalue";
    Exactly. Thank you for giving the correct explaination Kor.

    I thought when onsubmit event is called on a form , 'this' refers to JavaScript's 'window' object eventhough it is called on SimpleJsPortlet object. Is that correct? If so can you please tell me why this referes to SimpleJSPortlet object in addListItem method?

    Code:
    function SimpleJSPortlet(id, window) {
         this.id = id;
         this.window = window;
       }
       SimpleJSPortlet.prototype.addListItem = function (value) {
    
         var prefs = this.window.getAttribute("preferences");
         prefs.setValue("Custom1", value);
         this.window.setPortletPreferences(prefs, this.handleLoadPortletPreferences);
         
       }
       SimpleJSPortlet.prototype.handleLoadPortletPreferences = 
       			function (portletWindow, status, portletPrefs) { 
            if (status==ibm.portal.portlet.PortletWindow.STATUS_OK) {
                portletWindow.setAttribute("preferences", portletPrefs);
                var prefs = portletPrefs.getMap();
                var htmlStr = "Number of preferences: "+prefs.length + "<br/>";
                for (var i=0; i<prefs.length; i++) {
                    temp = i + 1;
                    htmlStr += temp+" - "+prefs[i].name+" - "+prefs[i].values+" - "+prefs[i].readonly + "<br/>";
                }
                var temp = document.getElementById("show<%=portletWindowID%>");
                temp.innerHTML = htmlStr;
            }
            else { alert("error loading feed"); }
        }
    <!-- when addListItem is called on simpleJSPortlet object I thought 'this' refers to javascript's 'window' object. But why is this referiing to SimpleJSPortlet function in addListItem method?--->
    <form onsubmit="simpleJSPortlet.addListItem(this.newPref.value); return false;">
      <input name="newPref" type="text"></input>
      <input type="Submit" value="Add Pref"></input>
    </form>

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Typo again:
    Code:
    onsubmit="simpleJSPortlet.addListItem(this.newPref.value)
    You have created the function/object as SimpleJSPortlet()
    And no; in:
    Code:
    onsubmit="SimpleJSPortlet.addListItem(this.newPref.value)
    this refers the form object (if this was your question)

  10. #10
    Join Date
    Oct 2009
    Posts
    12
    Quote Originally Posted by Kor View Post
    Typo again:
    Code:
    onsubmit="SimpleJSPortlet.addListItem(this.newPref.value)
    this refers the form object (if this was your question)
    Thank you very much for your kind reply
    If this refers to form object how does 'this' refers to 'SimpleJSPortlet' object in addListItem method? Where as 'this' refers to JS Window object in "handleLoadPortletPreferences" method.( I saw that in Firebug's script console.) can you please help me.

    [The code given in the above post works fine(except the typo-because of editing the original code). I wanted to know the scope concept of JS]

  11. #11
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    this refers always the object that a function is a method of. You see, in javascript a function can be a constructor as well (same as a method), thus the keyword this can be a reference for different objects, according to who uses that function as a method (or constructor). For instance:
    Code:
    function myFunction() {
    alert(this)
    }
    window.onload=myFunction;
    As you can see, in the example above, I used the function myFunction as a method and I called it using an event (onload) attached to an object. That object is the Global Object, the window.

    Now let's call the same function the same way, but using another object and another attached event
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function myFunction() {
    alert(this);
    }
    window.onload=function(){
    myFunction();
    var div=document.getElementById('myDiv');
    div.onclick=myFunction;
    }
    </script>
    </head>
    <body>
    <div id="myDiv">click me</div>
    </body>
    </html>
    When the window object is loaded, it will fire the function myFunction() which (as you already saw) the window Object. But I have also attached an event (onclick) to a DIV object in order to call the same function. Now, when you will click on that div, this becomes the reference of that object, than means the DIV object.

    To understand better how the keyword this works, let's see what a constructor does:
    Code:
    function myConstructor(oName) {
    this.name=oName;
    }
    var employee_1= new myConstructor('Joe Dowe');
    var employee_2= new myConstructor('Ann Boyle');
    alert(employee_1.name);
    alert(employee_2.name);
    You see now that the keyword this may refer any of those two objects (employee_1 and employee_2), each at a time, who uses the function as a constructor.

    Were those examples above of any help?
    Last edited by Kor; 11-12-2009 at 03:51 AM.

  12. #12
    Join Date
    Oct 2009
    Posts
    12
    Thanks a lot for providing such a detailed and useful information. This was indeed very useful. Once again thank you very much for explaining it in details.

  13. #13
    Join Date
    Oct 2009
    Posts
    12
    Quote Originally Posted by AppsWorld View Post
    Thanks a lot for providing such a detailed and useful information. This was indeed very useful. Once again thank you very much for explaining it in details.
    One more question Kor, Is it possible to execute a call back function within a particular context.
    For example in the above program we have
    this.window.setPortletPreferences(prefs,handleLoadPortletPreferences)

    where handleLoadPortletPreferences is the callback function once this.window.setPortletPrefences is called.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles