JavaScriptオブジェクトをHTMLで更新する

私はスターウォーズベースのRPGを構築しています。ゲームの最初の部分では、私はプレイする側（反逆者/帝国）を選ぶようにユーザーに依頼しようとしています。私はそれぞれのサイドロゴのある画像を含む2つのdivがあります。たとえば、ユーザーがEmpireのロゴをクリックするとEmpireとして再生されます。 JavaScriptで兵士のプロトタイプを作成した場合、ユーザーが特定のdiv/imageをクリックすると、兵士オブジェクトのプロパティをどのように更新するのですか？私が受け取った唯一のアドバイスは、jQueryで行う方が簡単だろうということです。私はそれを把握するように見えることはできませんが、これは私が持っているものです。JavaScriptオブジェクトをHTMLで更新する

<body> 
<h2>Choose Your Side</h2> 
<div class="rebels"> 
<div onclick="chooseSide()"> 
<img id="logo" src="../img/rebels.jpg" alt="Rebels" height="320" width="380"> 
</div> 
</div> 
<div class="empire"> 
<div onclick="chooseSide()"> 
<img id="logo" src="../img/empire.jpg" alt="Empire" height="300" width="300"> 
</div> 
</div> 

function soldier(side, weapon, sidearm) { 
this.side = function chooseSide() { 
    //code here 
} 
}

出典

2016-04-07 ricksanchez

'chooseSide（ 'rebels'）' - 関数の引数を渡しますか？ – evolutionxbox

choosSide（）関数はグローバルスコープにありません。それは兵士の機能です。たとえば、変数インスタンスを作成する必要があります。兵士の「兵士」であり、世界的にアクセス可能にする。次に、onclickは 'Solder.chooseSide（）'のような変数を呼び出す必要があります – Hoyen

Booグローバル変数！ブー！ – evolutionxbox

このようなことができます。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Prueba</title> 
    <script type="text/javascript"> 

     var soldier = { 
      "side" : "" 
     } 

     function chooseSide(object){ 
      var alt = object.childNodes[1].alt 
      soldier.side = alt; 
     } 

    </script> 
</head> 
<body> 
<h2>Choose Your Side</h2> 
<div class="rebels"> 
<div onclick="chooseSide(this)" style="background-color: red; height: 20px;"> 
    <img id="logo" src="../img/rebels.jpg" alt="Rebels" height="320" width="380"/> 
</div> 
</div> 

<div class="empire"> 
<div onclick="chooseSide(this)" style="background-color: blue; height: 20px;"> 
    <img id="logo" src="../img/empire.jpg" alt="Empire" height="300" width="300"/> 
</div> 
</div> 

</body> 
</html>

出典

2016-04-07 00:29:33 eflorespalma

プレイヤーの、この場合は兵士のプロパティを保存するために、次のようにあなたがオブジェクトを作成することができます。

var soldier = { 

}

あなたはその後、言うことができる：

function chooseSide(side) { 
    soldier["side"] = side; 
}

を兵士オブジェクトは、次にようになります。

：あなたが言ってあなたの兵士の側にアクセスすることができ、以降のコードで

{ 
    side: "rebels/empire" 
}

console.log(soldier.side); 
// Obviously this is just a print to the console, but you can anything with it

**また、あなたのonclickイベントで関数を呼び出すときには、 "反逆者"のような値を渡す必要があります。私もあなたの兵士の機能の必要性を見ていない。

**これにより、兵士のインスタンスが1つだけ作成されます。

出典

2016-04-07 00:13:00 theblindprophet

ドット表記ではなく角かっこ表記を使用するのはなぜですか？ – evolutionxbox

それは好みです。変数をオブジェクトキーとして使用するには、その表記法を使用する必要があります。そのため、この規約に従うだけで、コードはボード全体で似ています。 – theblindprophet

わかりました...私にとって、ドット表記は私の好みです（それは私にはちょっと見えます）。計算されたプロパティ名が必要な場合、または配列にアクセスしている場合を除きます。 – evolutionxbox

JavaScriptオブジェクトをHTMLで更新する

答えて

関連する問題