Updating JavaScript Object with HTML

So I am building a Star Wars based rpg. In the first part of the game I am trying to ask the user to pick a side (rebels/empire) to play as. I have two divs that contain images with each respective sides logo. So for example, if the user clicks the empire logo they will play as the Empire. If I make a soldier prototype in JavaScript, how would I update the properties in the soldier object if the user clicks on a certain div/image? The only advice I've received is that it would be easier to do in jQuery? I can't seem to figure it out but this is what I have:

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

Answers 1

  • You can do something like this.

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

Related Articles