JavaScript calling a function within a function gives TypeError

Question

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

Vikram Singh · Accepted Answer · 2018-08-20 06:49:43Z

1

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.

answered Aug 20, 2018 at 6:49

Vikram Singh

563 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wizzwizz4 · Accepted Answer · 2018-08-20 06:10:35Z

0

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.

answered Aug 20, 2018 at 6:10

wizzwizz4

6,5212 gold badges29 silver badges68 bronze badges

2 Comments

Danny Over a year ago

The reason I am using the function instead of what you suggested is that I have 11 text input boxes to set to "hidden". I just thought it would be shorter code to use a function to set them all to "hidden" instead of having one line of code for each of them ...

Danny Over a year ago

Oh yes ... thank you for the tip on the $ sign in variable names ... I have removed all the $ signs ... ;)

Collectives™ on Stack Overflow

JavaScript calling a function within a function gives TypeError

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related