オブジェクトのプロパティの動的値

Question

オブジェクトの動的（ユーザー入力からの）値を作成したいが、私は "未定義"となる。アイデアは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

Hereは、あなたの例の作業スニペットです。

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

すべてのミスをブランドンによって非常によくまとめられています。

* EDIT：（コメントへのANSER）

あなたのコードでは、2つの実行に関連する問題があります。あなたが<input>一部前にスクリプトを挿入した場合

• <script>タグは、直ちにそのために実行され、あなたが取得するために利用可能なinput要素はありません。
• 入力の値を取得する場合、ユーザーがsubmitをクリックするとデータが含まれるため、.value()を使用してonclickの時間を読み取る必要があります。 onclickの部分の外でそれらを読み取ろうとすると、入力フィールドが空のときにページがロードされている間すぐにアクセスされます。

Answer 2

コードにはいくつか問題があります。

あなたはここに

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

あなたが最初の変数を宣言しているように、文を切り替えてみてくださいそれらを宣言する前に、ここで

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

あなたの変数を使用しました。

また、sisterIdはありません。fatherIdを2回使用しました。

DOMの準備が整う前にjavascriptも呼び出しています。あなたはjQueryのを使用している場合は、

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

であなたのJSをラップしたり、プレーンなJSに固執する場合は、myFamilyがになっているものについて、より具体的にする必要があります

window.onload = function() { } 

を試してみてくださいあなたがその方法について言及していないからです。