Javascript class only displaying one of the objects

Question

I am trying to console log the 'options' argument but for some reason it only shows the first object? what and how can i make it console log all of the the objects inside the 'new validator'?

HTML

<form>
<input type="text" id="register_username">
<input type="password" id="register_password">
</form>

Javascript

    var Validator = function (options) {
        console.log(options);
    };
    var register_username = document.getElementById("register_username");
    var register_password = document.getElementById("register_password");

    document.getElementById("register_submit").addEventListener("click", function (e) {
        e.preventDefault();
        var register_val = new Validator(
                {
                    element: register_username,
                    type: "str",
                    min: 1,
                    max: 20
                },
                {
                    element: register_password,
                    type: "str",
                    min: 4,
                    max: 20
                }
        );

    }, false);

console log

element: <input id="register_username" class="register_username" placeholder="Username" name="register_username" autocomplete="off" type="text">
max: 20
min: 1
type: "str"

The second object is passed down as a second argument, so it makes sense that it's not part of the options argument since that one is the first — MinusFour
– MinusFour, Commented Jan 2, 2018 at 19:12
the other answers here are correct, change the console.log(options) to console.log(arguments) and you'll print all passed args. — lluisrojass
– lluisrojass, Commented Jan 2, 2018 at 19:15
May i ask why this works? why does arguments console.log both of the objects, i dont get this? i havent specified 'arguments' anywhere? — ii iml0sto1
– ii iml0sto1, Commented Jan 2, 2018 at 19:20

Abhinav Galodha · Accepted Answer · 2018-01-02 19:21:02Z

1

You can access all the passed in Parameters to a function using the arguments Object. It is an array like object which has all the Parameters information which was used to call the function.` It's a javascript keyword.

From MDN

The arguments object is a local variable available within all (non-arrow) functions. You can refer to a function's arguments within the function by using the arguments object. This object contains an entry for each argument passed to the function, the first entry's index starting at 0.

 var Validator = function (options) {
        console.log(arguments);
    };
    var register_username = document.getElementById("register_username");
    var register_password = document.getElementById("register_password");

    document.getElementById("register_submit").addEventListener("click", function (e) {
        e.preventDefault();
        var register_val = new Validator(
                {
                    element: register_username,
                    type: "str",
                    min: 1,
                    max: 20
                },
                {
                    element: register_password,
                    type: "str",
                    min: 4,
                    max: 20
                }
        );

    }, false);

<form>
<input type="text" id="register_username">
<input type="password" id="register_password">
<input type="button" id="register_submit" value="click">

</form>

answered Jan 2, 2018 at 19:21

Abhinav Galodha

9,9862 gold badges33 silver badges41 bronze badges

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

1 Comment

ii iml0sto1 Over a year ago

Thanks this has helped me out quite alot! i were not aware of the arguments keyword :)

tenor528 · Accepted Answer · 2018-01-02 19:22:08Z

It seems like you either want to pass an array of options, or accept multiple options in your constructor function.

Array of options:

var register_val = new Validator(
    [
        {
            element: register_username,
            type: "str",
            min: 1,
            max: 20
        },
        {
            element: register_password,
            type: "str",
            min: 4,
            max: 20
        }
    ]
);

Constructor with multiple options:

var Validator = function (option1, option2) {
    console.log(option1, option2);
};

If you want this multiple options version but you don't know how many options will be sent, then you might want to use the arguments keyword to get an array of all the parameters passed to the constructor.

Collectives™ on Stack Overflow

Javascript class only displaying one of the objects

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related