AppendChild method error.

[afish674]

I am trying to append an error message in a div to a label tag with an ID when the conditions in an IF statement are false. However I get this error in firefox error console: Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLLabelElement.appendChild]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: [file_path_is_here] :: days :: line 23" data: no]" My HTML Code is:

[more code include form tags etc before this point but not relevant to question]<p>	  <label>	  <label class="form_labels" id="contact_times"> If by phone, when is the best time to contact you? (You can tick more than one box)</label>	    </p>		  <input type="checkbox" name="contact_times" value="Morning" id="contact_morn" />	    <label>Morning</label>	  <br />	  <label>	    <input type="checkbox" name="contact_times" value="Afternoon" id="contact_aft" />	    Afternoon</label>	  <br />	  <label>	    <input type="checkbox" name="contact_times" value="Evening" id="contact_eve" />	    Evening</label>	  <br />   	  <p>	    <label>		  <input type="checkbox" name="contact_days" value="Monday" id="contact_mon" />		  Monday</label>	    <br />	    <label>		  <input type="checkbox" name="contact_days" value="Tuesday" id="contact_tues" />		  Tuesday</label>	    <br />	    <label>		  <input type="checkbox" name="contact_days" value="Wednesday" id="contact_weds" />		  Wednesday</label>	    <br />	    <label>		  <input type="checkbox" name="contact_days" value="Thursday" id="contact_thurs" />		  Thursday</label>	    <br />	    <label>		  <input type="checkbox" name="contact_days" value="Friday" id="contact_fri" />		  Friday</label>	    <br />	  </p>[rest of code continues..]

JavaScript function code:

function days(){var mon=document.getElementById("contact_mon");var tues=document.getElementById("contact_tues");var weds=document.getElementById("contact_weds");var thurs=document.getElementById("contact_thurs");var fri=document.getElementById("contact_fri");var contactTimes=document.getElementById("contact_times");var error=document.createElement("div");var errorTxt=document.createTextNode("Please tick some times that I can contact you");error.appendChild(errorTxt); if((mon.checked)||(tues.checked)||(weds.checked)||(thurs.checked)||(fri.checked)){  return true;   }else{  contactTimes.appendChild("error");  return false;  }}

Can anyone suggest why this is not working?

[Ingolme]

On this line, you're passing "error" as a string instead of an HTML node. Strings can't be casted to nodes:

contactTimes.appendChild("error"); 

[afish674]

On this line, you're passing "error" as a string instead of an HTML node. Strings can't be casted to nodes:

contactTimes.appendChild("error"); 

Thanks, that fixed it! I think I got confused because when you use the getelementbyID method you use quotes around the div name.

[afish674]

How would you set it so that it will only display the box the first time an error is returned and didn't keep making new copies of the div?

[eTianbun]

Create a global variable called "count" with a value of zero(0) (outside the function) and change your else{} statement to this:

else {if(count==0){contactTimes.appendChild(error); count=1}; return false}

[justsomeguy]

I would give the div an ID when you create it: var error=document.createElement("div");error.id = 'error_output';var errorTxt=document.createTextNode("Please tick some times that I can contact you");error.appendChild(errorTxt); Then you can check if it exists each time:

var error = document.getElementById('error_output');if ((typeof error) == 'undefined'){  // create and append element  error = document.createElement('div');  ...}error.innerHTML = 'error message';

[afish674]

I would give the div an ID when you create it: var error=document.createElement("div");error.id = 'error_output';var errorTxt=document.createTextNode("Please tick some times that I can contact you");error.appendChild(errorTxt); Then you can check if it exists each time:

var error = document.getElementById('error_output');if ((typeof error) == 'undefined'){  // create and append element  error = document.createElement('div');  ...}error.innerHTML = 'error message';

I didn't realise you could give the element an ID, this is very useful to know because I was using JavaScript to style the error box. Now I can use CSS instead! I don't know where to put the test though to make it work. I tried nesting another if/else statement within my else statement like this:

function days(){var mon=document.getElementById("contact_mon");var tues=document.getElementById("contact_tues");var weds=document.getElementById("contact_weds");var thurs=document.getElementById("contact_thurs");var fri=document.getElementById("contact_fri");var contactTimes=document.getElementById("contact_times");var error=document.createElement("div");error.id="error_output";var errorTxt=document.createTextNode("Please tick some times that I can contact you");error.appendChild(errorTxt); if((mon.checked)||(tues.checked)||(weds.checked)||(thurs.checked)||(fri.checked)){  return true;   }else{  if(typeof error_output =="undefined")  {  contactTimes.appendChild(error);  return false;  }  else {   return false;   }  }}

but this didn't work

[afish674]

Upon closer inspection, by putting an alert with

alert(typeof error);

or

alert(typeof error_output);

in before the first IF statement, it always returns "undefined" for "error_output" and always returns "object" for error.

[justsomeguy]

Don't create the div every time, only create it if it doesn't already exist like I showed.

if((mon.checked)||(tues.checked)||(weds.checked)||(thurs.checked)||(fri.checked)){  return true;}else{  var error = document.getElementById('error_output');  if ((typeof error) == 'undefined')  {    // create and append element    error = document.createElement('div');    error.id="error_output";    contactTimes.appendChild("error");  }  error.innerHTML = "Please tick some times that I can contact you";  return false;}

[afish674]

Don't create the div every time, only create it if it doesn't already exist like I showed.

if((mon.checked)||(tues.checked)||(weds.checked)||(thurs.checked)||(fri.checked)){  return true;}else{  var error = document.getElementById('error_output');  if ((typeof error) == 'undefined')  {	// create and append element	error = document.createElement('div');	error.id="error_output";	contactTimes.appendChild("error");  }  error.innerHTML = "Please tick some times that I can contact you";  return false;}

So the whole function would look like this?

function days(){var mon=document.getElementById("contact_mon");var tues=document.getElementById("contact_tues");var weds=document.getElementById("contact_weds");var thurs=document.getElementById("contact_thurs");var fri=document.getElementById("contact_fri");var contactTimes=document.getElementById("contact_times"); if((mon.checked)||(tues.checked)||(weds.checked)||(thurs.checked)||(fri.checked)){  return true;}else{  var error = document.getElementById("error_output");   if ((typeof error) == "undefined")   {    // create and append element    error = document.createElement("div");    error.id="error_output";    contactTimes.appendChild("error");  }  error.innerHTML = "Please tick some times that I can contact you";  return false;}}

Is that what you mean? Because this returns an error in the console of "error is null"

[justsomeguy]

I copied part of your original code, error should not be in quotes there.

[ShadowMage]

The if statement should not be checking to see if the type is undefined. It should be checking to see whether error is null. If getElementById cannot find the element with the specified id, it returns null, not undefined.

if (error === null) {

[afish674]

I copied part of your original code, error should not be in quotes there.

Quotes where? I took some out around the error in

contactTimes.appendChild("error");

but it still didn't work.

The if statement should not be checking to see if the type is undefined. It should be checking to see whether error is null. If getElementById cannot find the element with the specified id, it returns null, not undefined.

if (error === null) {

I did try changing it to that too. It still just says in the console "error is null." Maybe it'd be easier to try the loop method.

[eTianbun]

Did you try the method i gave you?

[afish674]

Did you try the method i gave you?

Yes, this works great thanks! I knew this method would work, I just wanted to try it with an ID. However since I didn't get that to work I am using your method. Can you explain why the count variable needs to be global rather than just local to the function? Just for my understanding. Thanks for your help

[eTianbun]

You can also use the other method, if you code it well.EX:

else{if(document.getElementById('error_output')==null){/*append the element if not found*/}; return false}

??????????The reason the variable in the method i gave you is not inside the function, is because: When you have a local variable inside a function, even though you change it value to something else, it ll still be reset if the function executed again.

[thescientist]

null or undefined would both evaluate to false, so you can simply test for a "bad" value like

if(error){  //it is defined and not null, it evaluates to true}else{  //it is not defined, or it is null, or false};