Can only have one function in JS module

Question

I found this post on how to write a cookie with Blazor (as it turns out, that involves JavaScript). Using the sample from the post, I made my own version, with both a Write and a Read function. So it looks like this:

<script>
    window.blazorExtensions = {

        WriteCookie: function (name, value, days) {

            var expires;

            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toGMTString();
            }
            else {
                expires = "";
            }

            document.cookie = name + "=" + value + expires + "; path=/";
        };

        ReadCookie: function (cname) {
            var name = cname + "=";
            var decodedCookie = decodeURIComponent(document.cookie);
            var ca = decodedCookie.split(';');
            for(var i = 0; i <ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
                }
            }
            return "";
        }
    }
</script>

Only problem is... It doesn't work :-(

If I only have theWriteCookie method it works. If I only have the ReadCookie method it works. But if I have both, it does not work.

From the looks of it, the window part is a module, but I could be wrong. However, this it what VS Code says, in the tool tip:

Can anyone explain to me, why this does not work? I tried Google, but since I struggle with the terminology, it's hard to find something useful. I am used to C# and thought that the window.blazorExtension was some sort of namespace.

If it's any help, here is how I invoke the functions:

public async Task WriteCookeAsync() {
        var test = await JSRuntime.InvokeAsync<object>("blazorExtensions.WriteCookie", "Color", colorCode, 7);
    }

You are defining members of an object. Those are supposed to be separated with commas, but you have used a semicolon. Is that it? — Peter Morris, Aug 17 '20 at 17:22

score 3 · Accepted Answer · answered Aug 17 '20 at 17:30

3

Without actually checking your functions' for correctness, I can see the object window.blazorExtensions is not defined correctly. What you need to do is to change the semi-colon after the WriteCookie function definition to a comma as JavaScript object properties are comma-separated...

window.blazorExtensions = {
    
    WriteCookie: function (name, value, days) {
        //...
    },

    ReadCookie: function (cname) {
        //...
    },
};

answered Aug 17 '20 at 17:30

BitShredder

111
3

It works now, thanks. Gotta love how a single character can kick you in the nuts like that... Is there a name of the way of defining functions in that way (e.g. `FunctionName: function(input) {}`? I couldn't find any examples of it in the JS Tutorials. – Jakob Busk Sørensen Aug 17 '20 at 17:37
@JakobBuskSørensen Haha, you're not wrong! Don't think it has a specific name, basically, it is simply creating an object literal; object properties can be any other object, including functions, which in JavaScrit are first-class objects themselves.If this is now solved for you, can you mark this answer as the correct solution. Thanks. – BitShredder Aug 17 '20 at 17:48
done, and thank you! I just wanted the understanding of why, as well as what, before I accepted :-). – Jakob Busk Sørensen Aug 17 '20 at 17:58

Can only have one function in JS module

1 Answers1