7 Replies - 1284 Views - Last Post: 17 March 2013 - 01:32 PM

#1 Eadmanday  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 49
  • Joined: 23-October 12

writing to a <form> with InnerHTML issues.

Posted 16 March 2013 - 05:36 PM

Ok so when i run the site i do not get the buttons on the page. The error on the site is saying " Uncaught TypeError: Cannot read property 'innerHTML' of null " on JS line 13. I am sure i am missing somethign very simple here. just thought i would ask for a 2nd pair of eyes


window.onload = function()
{
var outstring =" ";
var out = document.getElementById("pirateForm");

var phrases = [["Greetings", "hello", "ahoy", "pardon me", "avast", "excuse me" , "arrr"], ["People", "stranger", "scuvry dog", "sir", "matey", "madam", "proud beauty"], ["Questions", "where is", "whar be", "can you help me find", "know ye", "is taht", "be that"], ["Articles", "the", "th'", "my", "me", "your", "yer"], ["Places", "restroom", "restaurant", "galley", "hotel","fleabag inn"]];

for (var i = 0; i < phrases.length; i++)
	{
	var category = phrases[i][0];

//*** If i change to a doc.write it will output but want to use CSS
	outstring =("<div><tr valign='top'><td>" + category +": <td></div>");
	out.innerHTML += out;
	
	for(var j = 1; j <phrases[i].length; j+=2)
	{
// Will also replace this Doc.write. 
	document.write("<input type=\"button\" value=\"" + phrases[i][j] + "\" onclick='document.PirateForm.Output.value += \"" + phrases[i][j+1] + " \";'>\n");
	}
	
}




I am trying to get ride of the doc.writes, so i can use CSS. Just hit a rock here. Thanks for your help guys.

Is This A Good Question/Topic? 0
  • +

Replies To: writing to a <form> with InnerHTML issues.

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3553
  • View blog
  • Posts: 10,332
  • Joined: 08-June 10

Re: writing to a <form> with InnerHTML issues.

Posted 16 March 2013 - 06:00 PM

the problem is line #19. document.write() kills your page if used after the page load (and the load event makes sure you do that). hence after the first cycle the HTML only contains what was printed by document.write() and in that HTML there is no ID pirateForm present any more (then getElementById() returns null and you get that error).

morals: never use document.write() in the first place.
Was This Post Helpful? 0
  • +
  • -

#3 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4360
  • View blog
  • Posts: 12,179
  • Joined: 18-April 07

Re: writing to a <form> with InnerHTML issues.

Posted 16 March 2013 - 06:01 PM

Well I am not sure what element your "pirateform" is but the statement out.innerHTML += out; is saying read the innerHTML from pirateform and then append out to it. Try doing that with a variable instead and then after the loop is done, set out.innerHTML = variable. You are just going to see performance gains by doing that.

Also you call the form PirateForm and then in your javascript getElementById you use "pirateForm". The ID is case sensitive. So make sure you capitalize the "p". Once you change that, out should be defined and then it can read innerHTML.

:)
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3611
  • View blog
  • Posts: 12,419
  • Joined: 12-December 12

Re: writing to a <form> with InnerHTML issues.

Posted 16 March 2013 - 06:53 PM

Also the outstring will produce mal-formed HTML - there is no closing TR tag:

outstring =("<div><tr valign='top'><td>" + category +": <td></div>");
out.innerHTML += out;

and I assume that you intended to append outstring, not out, which will be a reference to an element. And valign is deprecated - use CSS.

This post has been edited by andrewsw: 16 March 2013 - 06:54 PM

Was This Post Helpful? 0
  • +
  • -

#5 Eadmanday  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 49
  • Joined: 23-October 12

Re: writing to a <form> with InnerHTML issues.

Posted 17 March 2013 - 01:20 PM

Ok so its just me or am i not seeing this. The code sets outString to an empty string. gets the form by ID "pirateForm".

var outString ="";
var out = document.getElementById("pirateForm"); 




I then set the code to to get the innerHTML of the pirateForm
	out.innerHTML += outstring;


and set it to the empty string.? should they be reversed in outstring += out.innerHTML?
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3553
  • View blog
  • Posts: 10,332
  • Joined: 08-June 10

Re: writing to a <form> with InnerHTML issues.

Posted 17 March 2013 - 01:25 PM

View PostEadmanday, on 17 March 2013 - 09:20 PM, said:

gets the form by ID "pirateForm".

the point of the error message is that there is no element with such an ID. (when getElementById() returns null, then that element does not exist).
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3611
  • View blog
  • Posts: 12,419
  • Joined: 12-December 12

Re: writing to a <form> with InnerHTML issues.

Posted 17 March 2013 - 01:28 PM

As Martyr2 already advised, it seems that your form is named "PirateForm", not "pirateForm": Javascript is case-sensitive.
Was This Post Helpful? 0
  • +
  • -

#8 Eadmanday  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 49
  • Joined: 23-October 12

Re: writing to a <form> with InnerHTML issues.

Posted 17 March 2013 - 01:32 PM

AHhhhh... well on my HTML i had it set as Name = "priateForm" not Id.... Sorry to bug with an easy question. Thanks for all the help on it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1