innerHTML not working

@AppsWorldNov 10.2009

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

to post a comment

JavaScript

12 Comments(s) _↴

@JMRKERNov 10.2009 — #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.

@AppsWorldauthorNov 10.2009 — #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.

[upl-file uuid=8c80be26-2a5f-44c1-8066-1dc7b406e633 size=1kB]Testing_innerHTML.zip[/upl-file]

@KorNov 10.2009 — #Typo:

<i>
 </i>document.getElementById('Aircraft').inn[COLOR="Red"][B]n[/B][/COLOR]erHTML="Remove from Favorite";

You have written an extra [B]n[/B] ?

@Declan1991Nov 10.2009 — #1. document.[formname].elementName.innerHTML = ???[/QUOTE]
Slight typo there. That should be document[formname].elementName.innerHTML, there is no fullstop after document.

@AppsWorldauthorNov 11.2009 — #Typo:

<i>
 </i>document.getElementById('Aircraft').inn[COLOR="Red"][B]n[/B][/COLOR]erHTML="Remove from Favorite";

You have written an extra [B]n[/B] ?[/QUOTE]

Thank you very much for pointing out that. I don't know why Mozilla and IE didn't fire any JS errors.

@KorNov 11.2009 — #I don't know why Mozilla and IE didn't fire any JS errors.[/QUOTE]
Because any JS interpreter will consider that as a simple assignment and [B]inn[B][COLOR="Red"]n[/COLOR][/B]erHTML[/B] as a custom property. You have simply created a new property and give it a value.

It is perfect legal, isn't it? ?

<i>
 </i>[I]object[/I].[B][COLOR="Blue"]myCustomProperty[/COLOR][/B]="somevalue";

@AppsWorldauthorNov 12.2009 — #Because any JS interpreter will consider that as a simple assignment and [B]inn[B][COLOR="Red"]n[/COLOR][/B]erHTML[/B] as a custom property. You have simply created a new property and give it a value.

It is perfect legal, isn't it? ?

<i>
 </i>[I]object[/I].[B][COLOR="Blue"]myCustomProperty[/COLOR][/B]="somevalue";

[/QUOTE]

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>[/CODE]

@KorNov 12.2009 — #Typo again:

<i>
 </i>onsubmit="[COLOR="Red"]s[/COLOR]impleJSPortlet.addListItem(this.newPref.value)

You have created the function/object as [B][COLOR="Blue"]S[/COLOR][/B]impleJSPortlet()

And no; in:

<i>
 </i>onsubmit="SimpleJSPortlet.addListItem([COLOR="Blue"][B]this[/B][/COLOR].newPref.value)

[B][COLOR="Blue"]this[/COLOR][/B] refers the [B]form[/B] object (if this was your question)

@AppsWorldauthorNov 12.2009 — #Typo again:

<i>
 </i>onsubmit="SimpleJSPortlet.addListItem([COLOR="Blue"][B]this[/B][/COLOR].newPref.value)

[B][COLOR="Blue"]this[/COLOR][/B] refers the [B]form[/B] object (if this was your question)[/QUOTE]

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]

@KorNov 12.2009 — #[B]this[/B] 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 [B]this[/B] can be a reference for different objects, according to who uses that function as a method (or constructor). For instance:

<i>
 </i>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 [B]window[/B].

Now let's call the same function the same way, but using another object and another attached event

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;untitled&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 &lt;script type="text/javascript"&gt;
 function myFunction() {
 alert(this);
 }
 window.onload=function(){
 myFunction();
 var div=document.getElementById('myDiv');
 div.onclick=myFunction;
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="myDiv"&gt;click me&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

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, [B]this[/B] becomes the reference of [I]that[/I] object, than means [I]the DIV object[/I].

To understand better how the keyword [B]this[/B] works, let's see what a constructor does:

<i>
 </i>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 [B]this[/B] 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?

@AppsWorldauthorNov 12.2009 — #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.

@AppsWorldauthorNov 13.2009 — #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.[/QUOTE]

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.

Also in #JavaScript _↴

HTML Code Killer javascript sumitted forms Auto Click

Success!

Help @AppsWorld spread the word by sharing this article on Twitter...

Tweet This

innerHTML not working

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

innerHTML not working

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴