Dynamic values in object properties

Question

want to make values of the oject's dynamic (from user input) but I get "undefined". The idea is to have 3 input fields and the user should input values in them which will fill up the alert message.

<script type="text/javascript">
function Family (fatherName, motherName, sisterName) {

    this.fatherName = fatherName;
    this.motherName = motherName;
    this.sisterName = sisterName;
    this.myFamily = function() {
        alert("My father's name is " + this.fatherName +", my mother's name is "+ this.motherName +" and my sister's name is " + this.sisterName +".");
    }

}

var Me = new Family(
    Family["fatherName"] = father,
    Family["motherName"] = mother,
    Family["sisterName"] = siter);

var father = document.getElementById("fatherId").value;
var mother = document.getElementById("motherId").value;
var sister = document.getElementById("sisterId").value;
</script>

<input type="text" id="fatherId" />
<input type="text" id="motherId" />
<input type="text" id="fatherId" />
<input type="submit" value="Send" onclick="Me.myFamily();">

Also I'm looking for a way how user can add or remove properties (values in them, too).

I don't understand the last sentence. What properties are we talking about? Can you provide an use case? — kubetz
– kubetz, Commented Dec 2, 2011 at 23:39

Brandon · Accepted Answer · 2011-12-02 23:03:01Z

2

There are a few things wrong with your code.

You've used your variables here

Family["fatherName"] = father,
Family["motherName"] = mother,
Family["sisterName"] = siter); // This should be sister by the way

before declaring them here

var father = document.getElementById("fatherId").value;
var mother = document.getElementById("motherId").value;
var sister = document.getElementById("sisterId").value; // Doesn't exist

Try switching the statements so you're declaring the variables first.

Also, there is no sisterId, you've used fatherId twice.

You're also calling javascript before the DOM is ready. If you're using jQuery, wrap your JS in

$(document).ready(function() { }

or if you want to stick with plain JS, try

window.onload = function() { }

You'll have to be more specific on what myFamily is supposed to do, since you haven't even mentioned that method.

edited Dec 2, 2011 at 23:03

answered Dec 2, 2011 at 22:57

Brandon

70.3k32 gold badges201 silver badges227 bronze badges

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

3 Comments

sundaysloth Over a year ago

At first I declare the variables first, but then it doesn't work at all. Why caliing the function onload? Onload there aren't values yet. I fixed the IDs, 10x.

RobG Over a year ago

Strictly, it's not the declaration that's out of order but the assignment of values (which is in the same statement).

RobG Over a year ago

@RalitsaNikiforova—because your inputs don't have any values (or even exist) when the code runs. Give the inputs values and run the code after they are created in the DOM and it will work.

kubetz · Accepted Answer · 2011-12-02 23:52:03Z

1

Here is the working snippet of your example.

<input type="text" id="fatherId" />
<input type="text" id="motherId" />
<input type="text" id="sisterId" />
<input type="submit" value="Send" id="submit" />

<script>
    function Family(fatherName, motherName, sisterName) {

      this.fatherName = fatherName;
      this.motherName = motherName;
      this.sisterName = sisterName;

      this.myFamily = function() {
          alert("My father's name is " + this.fatherName + 
                ", my mother's name is " + this.motherName + 
                " and my sister's name is " + this.sisterName + ".");
      };

    }

    document.getElementById("submit").onclick = function() {
        var father = document.getElementById("fatherId").value;
        var mother = document.getElementById("motherId").value;
        var sister = document.getElementById("sisterId").value;

        Me = new Family(father, mother, sister);
        Me.myFamily();
    }
</script>

All the mistakes are summarized very well by Brandon.

*EDIT: (anser to your comment)

Your code has two execution related problems.

<script> tags are executed immediately and therefore if you insert script before the <input> part then there are no input elements available for you to retrieve.
You want to retrieve values of the inputs, but those inputs contain data when user clicks on the submit and therefore must be read using .value() at the onclick time. If you try to read them outside the onclick part then they are accessed immediately during page load when the input fields are empty.

edited Dec 2, 2011 at 23:52

answered Dec 2, 2011 at 23:10

kubetz

8,5661 gold badge25 silver badges27 bronze badges

2 Comments

sundaysloth Over a year ago

Thank you, it works! I want to ask only one thing more. In previous edited version there isn't document.getElementById("submit") and I have to reload to show values but now everything works fine. So does it means I have to define submit button first so there will be values when I click on submit?

kubetz Over a year ago

@RalitsaNikiforova I had to edit my answer to fix the error, but it should all work now. I added more details into the answer about the correct placement of parts of your example. In case it is not clear feel free to ask :).

Collectives™ on Stack Overflow

Dynamic values in object properties

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related