Jump to content

AppendChild method error.


afish674
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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';

Link to comment
Share on other sites

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 :(

Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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"

Link to comment
Share on other sites

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) {

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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 :)
Link to comment
Share on other sites

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.

Edited by eTianbun
Link to comment
Share on other sites

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};

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...