使用HTML更新JavaScript对象

Updating JavaScript Object with HTML

本文关键字：对象 JavaScript 更新 HTML 使用      更新时间：2024-02-17

所以我正在构建一个基于星球大战的rpg。在游戏的第一部分，我试图让用户选择一方（叛军/帝国）作为游戏角色。我有两个div，每个div都有各自的侧面标志。例如，如果用户点击帝国标志，他们将扮演帝国。如果我用JavaScript制作一个士兵原型，如果用户点击某个div/image，我将如何更新士兵对象中的属性？我收到的唯一建议是，在jQuery中这样做会更容易吗？我似乎想不通，但这就是我所拥有的：

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

您可以这样做。

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

您可以如下创建一个对象来存储玩家的属性，在本例中是士兵的属性。

例如

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事件中调用函数时，您需要传递一些值，例如"reverse"。我也不认为有必要你的士兵职能。

**这将只创建士兵的一个实例。

相关文章：