CODEWITHSUNDEEP
function
Danny
Danny

Reputation: 158

JavaScript calling a function within a function gives TypeError

I have read all that is available regarding calling a function within a function in JavaScript, but for some reason it is not working for me. The code is supposed to hide a text input box whenever the characters inside the text input box are less than 3 and show it whenever the characters inside the text input box are 3 or more.

The error I am getting is this: TypeError: set_visibility_hidden is not a function

Here is the form with the event handler: (The input text input_email is hidden when the page is loaded. As the user types his company name into the input_companyname the character length is counted and shown inside <span id="input_length"></span>. When the character count reaches 3 then the text input input_email becomes visible. If the user deletes any characters inside of input_companyname and the length of the characters are less than 3 than input_email becomes hidden again.

<form name="form_show_register" id="form_show_register" method="post" action="">
    <table>
        <tr>
            <td><input type="text" name="input_companyname" id="input_companyname" onkeydown="count_characters('input_companyname');" onkeyup="count_characters('input_companyname');"> Company Name <span id="input_length"></span></td>
        </tr>
        <tr>
            <td><input type="text" name="input_email" id="input_email"> Name</td>
        </tr>
    </table>
</form>

The following function sets the text input input_email to hidded when the page loads. This is also the function that is supposed to get called from the function count_characters():

function set_visibility_hidden ()
{
    document.getElementById("input_email").style.visibility = "hidden" ;
}

And finally, the following function is the one that counts the characters inside the text input input_companyname. This is also the function inside of which I want to call set_visibility_hidden() when the the characters become less than 3 i.e user deletes characters.

function count_characters ( $input_to_count )
{
    var character_length = document.getElementById($input_to_count).value.length ;
    document.getElementById("input_length").innerHTML = character_length ;

    if ( character_length > 2 )
        {
            document.getElementById("input_email").style.visibility = "visible" ;
        }
    else if ( character_length < 3 )
        {
            set_visibility_hidden () ;
        }
    else
        {
        }
}

I hope I have explained in a way that is comprehensible.

Thank you

Upvotes: 0

Views: 59

Answers (2)

Vikram Singh
Vikram Singh

Reputation: 56

Please check in your code, may be your are using other variable with same name "set_visibility_hidden" because that can be one reason. I have copy your code and test the same. it is working as per expectation.

Upvotes: 1

wizzwizz4
wizzwizz4

Reputation: 6426

I have no idea why this is happening... But why do you need this function? Wouldn't it be easier to write this?

function count_characters ( input_to_count )
{
    var character_length = document.getElementById(input_to_count).value.length ;
    document.getElementById("input_length").innerHTML = character_length ;
    var input_email = document.getElementById("input_email");

    if ( character_length > 2 )
        {
            input_email.style.visibility = "visible";
        }
    else if ( character_length < 3 )
        {
            input_email.style.visibility = "hidden";
        }
}

Also, don't use a dollar sign at the start of variable names; people will mistake your code for PHP at first glance and it'll confuse them.

Upvotes: 0

Related Questions