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>
Max
  • 21
  • 1

2 Answers2

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>
Ry-
  • 218,210
  • 55
  • 464
  • 476
  • Is `window.name` not settable then? – Eric Dec 24 '13 at 21:02
  • @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. – Dagg Nabbit Dec 24 '13 at 21:03
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>
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • +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? – Dagg Nabbit Dec 24 '13 at 20:59
  • Well... You might find [the properties of input here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input) 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. – Denys Séguret Dec 24 '13 at 21:03
  • 1
    But this doesn't explain how the tag's attributes become upvalues of inlined functions? – Dagg Nabbit Dec 24 '13 at 21:05
  • The event handler is executed in a scope descendant from the input, whose attributes are also properties. – Denys Séguret Dec 24 '13 at 21:05
  • 1
    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? – Dagg Nabbit Dec 24 '13 at 21:07
  • Thank you. It works fine now that the I changed the function name – Max Dec 24 '13 at 21:16