Динамические значения в свойствах объекта

Question

хочу сделать значения объекта динамическими (из пользовательского ввода), но я получаю "undefined".Идея состоит в том, чтобы иметь 3 поля ввода, и пользователь должен ввести в них значения, которые будут заполнять предупреждающее сообщение.

<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();"> 

Также я ищу способ добавления или удаления свойств (значений)в них тоже).

Answer 1

В вашем коде есть несколько ошибок:

Вы использовали свои переменные здесь

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

, прежде чем объявить их здесь

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

Попробуйте переключитьсяоператоры, поэтому вы сначала объявляете переменные.

Кроме того, нет sisterId, вы дважды использовали fatherId.

Вы также вызываете javascript перед DOMготов.Если вы используете jQuery, оберните JS в

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

или, если вы хотите придерживаться простого JS, попробуйте

window.onload = function() { }

.myFamily должен делать, так как вы даже не упомянули этот метод.

Answer 2

Здесь - рабочий фрагмент вашего примера.

<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>

Все ошибки очень хорошо обобщены Брэндон .

* РЕДАКТИРОВАТЬ: (ответ на ваш комментарий)

Ваш код имеет две проблемы, связанные с выполнением.

• <script> выполняются немедленно, и поэтому, если вы вставите скрипт перед частью <input>, тогда для вас не будет доступных элементов input.
• Вы хотите получить значения входных данных, но эти входные данные содержат данные, когда пользователь нажимает на submit, и, следовательно, должны считываться с использованием .value() во время onclick. Если вы попытаетесь прочитать их за пределами части onclick, то они будут доступны сразу во время загрузки страницы, когда поля ввода пусты.