2

Why doesn't the name function work. The chrome console outputs 'string is not a function'? Please provide the answer. Thanks

 <html>
 <head>
<script type="text/javascript">
    function name(){
    alert('hello, world');
    }

    // with parameters
    function test(x){
    alert(x);
    }
</script>
 </head>
 <body>
 <form>
 <input type="button" value="Press Me" name="foo" onClick="name()" />
</form>
 <a href="#" onClick="test('help')">help</a>
 <a href="#" onClick="name()">name</a>
 <script>
 name();
</script></code>
 </body>
 </html>
Improve this question
0

2 Answers 2

Reset to default
3

window.name is already a property that exists. When you have global functions, they also get put on the global object, but name gets converted to a string. It’s as if you were doing this:

window.name = function name() {
    …
};

You can…

  • Pick a different name for the function
  • Make the function anonymous and bind it through JavaScript (looks good)
  • Put all your functions in a function wrapper and bind it through JavaScript (looks better)

Here’s an example of that last one.

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Some page</title>
    </head>
    <body>
        <form>
            <input type="button" value="Press Me" id="foo">
        </form>

        <a href="#" id="help">help</a>
        <a href="#" id="name">name</a>

        <script type="text/javascript">
        (function() {
            function name() {
                alert('hello, world');
            }

            // with parameters
            function test(x) {
                alert(x);
            }

            document.getElementById("foo").onclick = name;
            document.getElementById("name").onclick = name;
            document.getElementById("help").onclick = function() {
                test('help');
            };
        })();
        </script>
    </body>
</html>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Is window.name not settable then?
@Eric window.name is settable, but in most browsers it can only be a string. But in this case I think dystroy's answer is correct, although I have no idea where this strange behavior is specified.
3

In your input, the name is "foo" as you could see by running this :

<input type="button" value="Press Me" name="foo" onClick="alert(name)" />

(it alerts "foo")

Demonstration

Simply give another name to your function.

Or better, take immediately the good habit to not inline javascript :

<input type="button" id=foo value="Press Me" name="foo"/>
...
<script>
   document.getElementById('foo').onclick=name;
</script>
Improve this answer

6 Comments

+1, but what the heck... how does this work? I can see this.name returning "foo", but how does name exist in the scope of this function (and not from window.name)? Is this behavior described in some part of some spec?
Well... You might find the properties of input here or notice you've set it yourself but you usually mostly find them when you get bitten. The solution is to follow the best practice : don't inline javascript in your HTML elements.
But this doesn't explain how the tag's attributes become upvalues of inlined functions?
The event handler is executed in a scope descendant from the input, whose attributes are also properties.
Yes, I get that, but that just means you can do this.name, right? How does name become part of a VO in the scope of the function?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.