Question

I have some global variables that increment a number.

var i = 0;  
var num = (i-1)+2;  
var i = num; 

Then, I have a function that checks the number and displays my HTML.

function showChild(){

if(num===1){
    document.getElementById("childFirst00").style.display = "block";
    document.getElementById("childLast00").style.display = "block";
    document.getElementById("deleteChild00").style.display = "block";
    num++;
}else if(num===2){
    document.getElementById("childFirst01").style.display = "block";
    document.getElementById("childLast01").style.display = "block";
    document.getElementById("deleteChild01").style.display = "block";
    num++;
}else if(num===3){
    document.getElementById("childFirst02").style.display = "block";
    document.getElementById("childLast02").style.display = "block";
    document.getElementById("deleteChild02").style.display = "block";
    num++;  
}else if(num===4){
    alert("Please Contact The Rectory If You Need To Add More Children");   
}
}

All of this works properly.
However, when I click the deleteChild00 button which calls the next function, I get an error of not enough arguments in Firebug.

function removeChild(){

if(num===2){
    document.getElementById("childFirst00").style.display = "none";
    document.getElementById("childLast00").style.display = "none";
    document.getElementById("deleteChild00").style.display = "none";
    num--;
}else if(num===3){
    document.getElementById("childFirst01").style.display = "none";
    document.getElementById("childLast01").style.display = "none";
    document.getElementById("deleteChild01").style.display = "none";
    num--;
}else if(num===4){
    document.getElementById("childFirst02").style.display = "none";
    document.getElementById("childLast02").style.display = "none";
    document.getElementById("deleteChild02").style.display = "none";
    num--;  
}   
}

This is the input HTML that calls the removeChild() function.

<input type="button" id="deleteChildButton" value="Remove Child" onClick="removeChild()"/>

What is causing the “not enough arguments” error in my removeChild() function?

Answer 1

removeChild() is a standard DOMnode moethod which requires an argument and should be called from a node, and different browsers will respond with different errors if you attempt to use it the way you have. Firefox returns the “not enough arguments” exception, while Chrome gives me “Uncaught Error: NOT_FOUND_ERR: DOM Exception 8”.

Rename your function to something else:

// Rename...
function removeChild(){
// to...
function someOtherRemoveChild(){

And call that in your markup instead.

<input type="button" id="deleteChildButton" value="Remove Child" onClick="someOtherRemoveChild()"/>

Alternatively, since you defined removeChild() in window scope, you should be able to call it via window.removeChild(), but I can’t guarantee that will work, and it is weird to redefine DOM methods, so I don’t actually recommend this:

<input type="button" id="deleteChildButton" value="Remove Child" onClick="window.removeChild()"/>