variable undefined in jquery rpg game

there are obviously a lot of errors in my logic here, I'm quite a noob to jQuery so any help would be greatly appreciated.

But we'll start out with my immediate error as of right now, where $("#char1").character[chosenChampion] = true; is undefined, I've tried these many different ways mostly with the 'this' keyword
here's my HTML, JavaScript (in jQuery), and CSS so far

$(document).ready(function () {

    //globals

    var chosenEnemy = false;

    var chosenChampion = false;

    var attack = 0;

    var health = 0;

    var counterAttack = 0;



    // run when chosing and attacking champions

    var fightStats = {

        getAttributes: function (char1, char2) {

            char1.attack = char1.attack + 10;

            char1.health = char1.health;



            char2.health = char2.health;

            char2.counterAttack = char2.getCounterAttack + 10;

        },

        levelUp: function (char1, char2) {

                char.attack += 10;

                char.health += 100;

        },

    };



    // game characters and starting attributes

    var characters = {

        obiWan: {

            health: 150,

            attack: 20,

            counterAttack: 15,

            chosenChampion: false,

            chosenEnemy: false,

        },// best in game

        lukeSkywalker: {

            health: 100,

            attack: 30,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        },

        darthVader: {

            health: 100,

            attack: 25,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        },

        emporerPalpatine: {

            health: 90,

            attack: 25,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        }, // worst in game

    };



    // run on battle button

    function battle(char1, char2) {

        char1.health -= char2.counterAttack

        char2.health -= char1.attack

    };



    // $("#char1").attr(character.obiWan); not sure if i can use something like this

    // for the data-type attribute i added to the img tag or if something like this would work better.





    // character selection and movement between sections

    if (chosenChampion === false) {

        $("#char1").on("click", function () {

            $("#char2").appendTo($("#enemies-sect1"));

            $("#char3").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char1").data('chosenChampion', true);

        });

        $("#char2").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char3").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char2").data('chosenChampion', true);

        });

        $("#char3").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char2").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char3").data('chosenChampion', true);

        });

        $("#char4").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char2").appendTo($("#enemies-sect2"));

            $("#char3").appendTo($("#enemies-sect3"));

            $("#char4").data('chosenChampion', true);

        });

    };



    if (chosenEnemy === false && chosenChampion === false) {

        $("#ememies-sect1").on("click", function () {

            $("#enemies-sect1").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

        $("#ememies-sect2").on("click", function () {

            $("#enemies-sect2").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

        $("#ememies-sect3").on("click", function () {

            $("#enemies-sect3").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

    };



    function Game(char1, char2) {

        fightStats.getAttributes(char1, char2);

        battle(char1, char2);

        if (char2.health < 0) {

            fightStats.levelUp(char1, char2);

        };



    };



    $("#fight-button").on("click", function () {

        game($("#yourchar"), $("#defenderobj"))

    });





});

/* typeography */

h1 {

    color: teal;

}



/* display settings */

.row {

    display: block;

}



.fight-button {

    padding: 5px 30px;

}



/* image styling */

img {

    margin: 0 20px;

}



.row-enemies div {

    display: inline;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>

<html>



<head>

    <!-- metas for phones -->

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Star Wars Game</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/main.css" />

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</head>



<body>



    <div class="row">

        <h1>Star Wars RPG!</h1>

    </div>



    <div class="row" id="your-char">

        <img id="char1" src="assets/Images/obi-wan-kenobi.png" data-name="obiWan">

        <img id="char2" src="assets/Images/luke-skywalker.jpg" data-name="lukeSkywalker">

        <img id="char3" src="assets/Images/darth-vader.jpg" data-name="darthVader">

        <img id="char4" src="assets/Images/palpatine.jpg" data-name="emporerPalpatine">

        <h3>Your Character</h3>

    </div>



    <div class="row-enemies">

        <div id="enemies-sect1"></div>

        <div id="enemies-sect2"></div>

        <div id="enemies-sect3"></div>

    </div>



    <div class="row">

        <h3>Enemies Available to Attack</h3>

        <h3>Fight Section</h3>

        <button class="fight-button" txt-content="Fight Section">Fight!</button>

        <h3>Defender</h3>

    </div>



    <div class="row">

        <div id="defender-obj"></div>

        <h2 class="battle-log"></h2>

    </div>



    <!-- link JavaScript file -->

    <script src="assets/JavaScript/main.js"></script>

</body>



</html>

edited Nov 12 '18 at 21:59

asked Nov 12 '18 at 20:37

Matt Taliancich

108

1

$("#char1") returns a jQuery object, containing at most one element whose id is char1. When you do $("#char1").character[chosenChampion] you are trying to access a property of character on the jQuery object. Unless you have done some custom logic to add that property to the jQuery object, that is not a standard property that jQuery has and will be undefined.
– Taplar
Nov 12 '18 at 20:40

that's why i tried adding data-type to the img tag that has the image stored, but now im thinking that it isnt enough and i should just add all the character attributes to new div's or something and take out the img tags all together?
– Matt Taliancich
Nov 12 '18 at 20:52

also i basically know which characters are going where so should i just change that bit of logic to just say obiWan since he is who is going to be put there?
– Matt Taliancich
Nov 12 '18 at 20:53

In that case, change data-name="character.obiWan" to data-name="obiWan" and you can get it with $(whateverId).data('name') and then you can stick that inside characters object.
– Taplar
Nov 12 '18 at 20:54

so the data name doesn't need the object reference and the id to change the property of chosen champion for this one would go like $("#char1").data('chosenChampion') = true; ?
– Matt Taliancich
Nov 12 '18 at 21:12

|
show 2 more comments

there are obviously a lot of errors in my logic here, I'm quite a noob to jQuery so any help would be greatly appreciated.

$(document).ready(function () {

    //globals

    var chosenEnemy = false;

    var chosenChampion = false;

    var attack = 0;

    var health = 0;

    var counterAttack = 0;



    // run when chosing and attacking champions

    var fightStats = {

        getAttributes: function (char1, char2) {

            char1.attack = char1.attack + 10;

            char1.health = char1.health;



            char2.health = char2.health;

            char2.counterAttack = char2.getCounterAttack + 10;

        },

        levelUp: function (char1, char2) {

                char.attack += 10;

                char.health += 100;

        },

    };



    // game characters and starting attributes

    var characters = {

        obiWan: {

            health: 150,

            attack: 20,

            counterAttack: 15,

            chosenChampion: false,

            chosenEnemy: false,

        },// best in game

        lukeSkywalker: {

            health: 100,

            attack: 30,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        },

        darthVader: {

            health: 100,

            attack: 25,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        },

        emporerPalpatine: {

            health: 90,

            attack: 25,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        }, // worst in game

    };



    // run on battle button

    function battle(char1, char2) {

        char1.health -= char2.counterAttack

        char2.health -= char1.attack

    };



    // $("#char1").attr(character.obiWan); not sure if i can use something like this

    // for the data-type attribute i added to the img tag or if something like this would work better.





    // character selection and movement between sections

    if (chosenChampion === false) {

        $("#char1").on("click", function () {

            $("#char2").appendTo($("#enemies-sect1"));

            $("#char3").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char1").data('chosenChampion', true);

        });

        $("#char2").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char3").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char2").data('chosenChampion', true);

        });

        $("#char3").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char2").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char3").data('chosenChampion', true);

        });

        $("#char4").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char2").appendTo($("#enemies-sect2"));

            $("#char3").appendTo($("#enemies-sect3"));

            $("#char4").data('chosenChampion', true);

        });

    };



    if (chosenEnemy === false && chosenChampion === false) {

        $("#ememies-sect1").on("click", function () {

            $("#enemies-sect1").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

        $("#ememies-sect2").on("click", function () {

            $("#enemies-sect2").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

        $("#ememies-sect3").on("click", function () {

            $("#enemies-sect3").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

    };



    function Game(char1, char2) {

        fightStats.getAttributes(char1, char2);

        battle(char1, char2);

        if (char2.health < 0) {

            fightStats.levelUp(char1, char2);

        };



    };



    $("#fight-button").on("click", function () {

        game($("#yourchar"), $("#defenderobj"))

    });





});

/* typeography */

h1 {

    color: teal;

}



/* display settings */

.row {

    display: block;

}



.fight-button {

    padding: 5px 30px;

}



/* image styling */

img {

    margin: 0 20px;

}



.row-enemies div {

    display: inline;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>

<html>



<head>

    <!-- metas for phones -->

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Star Wars Game</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/main.css" />

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</head>



<body>



    <div class="row">

        <h1>Star Wars RPG!</h1>

    </div>



    <div class="row" id="your-char">

        <img id="char1" src="assets/Images/obi-wan-kenobi.png" data-name="obiWan">

        <img id="char2" src="assets/Images/luke-skywalker.jpg" data-name="lukeSkywalker">

        <img id="char3" src="assets/Images/darth-vader.jpg" data-name="darthVader">

        <img id="char4" src="assets/Images/palpatine.jpg" data-name="emporerPalpatine">

        <h3>Your Character</h3>

    </div>



    <div class="row-enemies">

        <div id="enemies-sect1"></div>

        <div id="enemies-sect2"></div>

        <div id="enemies-sect3"></div>

    </div>



    <div class="row">

        <h3>Enemies Available to Attack</h3>

        <h3>Fight Section</h3>

        <button class="fight-button" txt-content="Fight Section">Fight!</button>

        <h3>Defender</h3>

    </div>



    <div class="row">

        <div id="defender-obj"></div>

        <h2 class="battle-log"></h2>

    </div>



    <!-- link JavaScript file -->

    <script src="assets/JavaScript/main.js"></script>

</body>



</html>

edited Nov 12 '18 at 21:59

asked Nov 12 '18 at 20:37

Matt Taliancich

108

1

$("#char1") returns a jQuery object, containing at most one element whose id is char1. When you do $("#char1").character[chosenChampion] you are trying to access a property of character on the jQuery object. Unless you have done some custom logic to add that property to the jQuery object, that is not a standard property that jQuery has and will be undefined.
– Taplar
Nov 12 '18 at 20:40

that's why i tried adding data-type to the img tag that has the image stored, but now im thinking that it isnt enough and i should just add all the character attributes to new div's or something and take out the img tags all together?
– Matt Taliancich
Nov 12 '18 at 20:52

also i basically know which characters are going where so should i just change that bit of logic to just say obiWan since he is who is going to be put there?
– Matt Taliancich
Nov 12 '18 at 20:53

In that case, change data-name="character.obiWan" to data-name="obiWan" and you can get it with $(whateverId).data('name') and then you can stick that inside characters object.
– Taplar
Nov 12 '18 at 20:54

so the data name doesn't need the object reference and the id to change the property of chosen champion for this one would go like $("#char1").data('chosenChampion') = true; ?
– Matt Taliancich
Nov 12 '18 at 21:12

|
show 2 more comments

there are obviously a lot of errors in my logic here, I'm quite a noob to jQuery so any help would be greatly appreciated.

$(document).ready(function () {

    //globals

    var chosenEnemy = false;

    var chosenChampion = false;

    var attack = 0;

    var health = 0;

    var counterAttack = 0;



    // run when chosing and attacking champions

    var fightStats = {

        getAttributes: function (char1, char2) {

            char1.attack = char1.attack + 10;

            char1.health = char1.health;



            char2.health = char2.health;

            char2.counterAttack = char2.getCounterAttack + 10;

        },

        levelUp: function (char1, char2) {

                char.attack += 10;

                char.health += 100;

        },

    };



    // game characters and starting attributes

    var characters = {

        obiWan: {

            health: 150,

            attack: 20,

            counterAttack: 15,

            chosenChampion: false,

            chosenEnemy: false,

        },// best in game

        lukeSkywalker: {

            health: 100,

            attack: 30,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        },

        darthVader: {

            health: 100,

            attack: 25,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        },

        emporerPalpatine: {

            health: 90,

            attack: 25,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        }, // worst in game

    };



    // run on battle button

    function battle(char1, char2) {

        char1.health -= char2.counterAttack

        char2.health -= char1.attack

    };



    // $("#char1").attr(character.obiWan); not sure if i can use something like this

    // for the data-type attribute i added to the img tag or if something like this would work better.





    // character selection and movement between sections

    if (chosenChampion === false) {

        $("#char1").on("click", function () {

            $("#char2").appendTo($("#enemies-sect1"));

            $("#char3").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char1").data('chosenChampion', true);

        });

        $("#char2").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char3").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char2").data('chosenChampion', true);

        });

        $("#char3").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char2").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char3").data('chosenChampion', true);

        });

        $("#char4").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char2").appendTo($("#enemies-sect2"));

            $("#char3").appendTo($("#enemies-sect3"));

            $("#char4").data('chosenChampion', true);

        });

    };



    if (chosenEnemy === false && chosenChampion === false) {

        $("#ememies-sect1").on("click", function () {

            $("#enemies-sect1").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

        $("#ememies-sect2").on("click", function () {

            $("#enemies-sect2").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

        $("#ememies-sect3").on("click", function () {

            $("#enemies-sect3").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

    };



    function Game(char1, char2) {

        fightStats.getAttributes(char1, char2);

        battle(char1, char2);

        if (char2.health < 0) {

            fightStats.levelUp(char1, char2);

        };



    };



    $("#fight-button").on("click", function () {

        game($("#yourchar"), $("#defenderobj"))

    });





});

/* typeography */

h1 {

    color: teal;

}



/* display settings */

.row {

    display: block;

}



.fight-button {

    padding: 5px 30px;

}



/* image styling */

img {

    margin: 0 20px;

}



.row-enemies div {

    display: inline;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>

<html>



<head>

    <!-- metas for phones -->

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Star Wars Game</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/main.css" />

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</head>



<body>



    <div class="row">

        <h1>Star Wars RPG!</h1>

    </div>



    <div class="row" id="your-char">

        <img id="char1" src="assets/Images/obi-wan-kenobi.png" data-name="obiWan">

        <img id="char2" src="assets/Images/luke-skywalker.jpg" data-name="lukeSkywalker">

        <img id="char3" src="assets/Images/darth-vader.jpg" data-name="darthVader">

        <img id="char4" src="assets/Images/palpatine.jpg" data-name="emporerPalpatine">

        <h3>Your Character</h3>

    </div>



    <div class="row-enemies">

        <div id="enemies-sect1"></div>

        <div id="enemies-sect2"></div>

        <div id="enemies-sect3"></div>

    </div>



    <div class="row">

        <h3>Enemies Available to Attack</h3>

        <h3>Fight Section</h3>

        <button class="fight-button" txt-content="Fight Section">Fight!</button>

        <h3>Defender</h3>

    </div>



    <div class="row">

        <div id="defender-obj"></div>

        <h2 class="battle-log"></h2>

    </div>



    <!-- link JavaScript file -->

    <script src="assets/JavaScript/main.js"></script>

</body>



</html>

edited Nov 12 '18 at 21:59

asked Nov 12 '18 at 20:37

Matt Taliancich

108

there are obviously a lot of errors in my logic here, I'm quite a noob to jQuery so any help would be greatly appreciated.

$(document).ready(function () {

    //globals

    var chosenEnemy = false;

    var chosenChampion = false;

    var attack = 0;

    var health = 0;

    var counterAttack = 0;



    // run when chosing and attacking champions

    var fightStats = {

        getAttributes: function (char1, char2) {

            char1.attack = char1.attack + 10;

            char1.health = char1.health;



            char2.health = char2.health;

            char2.counterAttack = char2.getCounterAttack + 10;

        },

        levelUp: function (char1, char2) {

                char.attack += 10;

                char.health += 100;

        },

    };



    // game characters and starting attributes

    var characters = {

        obiWan: {

            health: 150,

            attack: 20,

            counterAttack: 15,

            chosenChampion: false,

            chosenEnemy: false,

        },// best in game

        lukeSkywalker: {

            health: 100,

            attack: 30,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        },

        darthVader: {

            health: 100,

            attack: 25,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        },

        emporerPalpatine: {

            health: 90,

            attack: 25,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        }, // worst in game

    };



    // run on battle button

    function battle(char1, char2) {

        char1.health -= char2.counterAttack

        char2.health -= char1.attack

    };



    // $("#char1").attr(character.obiWan); not sure if i can use something like this

    // for the data-type attribute i added to the img tag or if something like this would work better.





    // character selection and movement between sections

    if (chosenChampion === false) {

        $("#char1").on("click", function () {

            $("#char2").appendTo($("#enemies-sect1"));

            $("#char3").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char1").data('chosenChampion', true);

        });

        $("#char2").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char3").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char2").data('chosenChampion', true);

        });

        $("#char3").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char2").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char3").data('chosenChampion', true);

        });

        $("#char4").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char2").appendTo($("#enemies-sect2"));

            $("#char3").appendTo($("#enemies-sect3"));

            $("#char4").data('chosenChampion', true);

        });

    };



    if (chosenEnemy === false && chosenChampion === false) {

        $("#ememies-sect1").on("click", function () {

            $("#enemies-sect1").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

        $("#ememies-sect2").on("click", function () {

            $("#enemies-sect2").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

        $("#ememies-sect3").on("click", function () {

            $("#enemies-sect3").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

    };



    function Game(char1, char2) {

        fightStats.getAttributes(char1, char2);

        battle(char1, char2);

        if (char2.health < 0) {

            fightStats.levelUp(char1, char2);

        };



    };



    $("#fight-button").on("click", function () {

        game($("#yourchar"), $("#defenderobj"))

    });





});

/* typeography */

h1 {

    color: teal;

}



/* display settings */

.row {

    display: block;

}



.fight-button {

    padding: 5px 30px;

}



/* image styling */

img {

    margin: 0 20px;

}



.row-enemies div {

    display: inline;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>

<html>



<head>

    <!-- metas for phones -->

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Star Wars Game</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/main.css" />

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</head>



<body>



    <div class="row">

        <h1>Star Wars RPG!</h1>

    </div>



    <div class="row" id="your-char">

        <img id="char1" src="assets/Images/obi-wan-kenobi.png" data-name="obiWan">

        <img id="char2" src="assets/Images/luke-skywalker.jpg" data-name="lukeSkywalker">

        <img id="char3" src="assets/Images/darth-vader.jpg" data-name="darthVader">

        <img id="char4" src="assets/Images/palpatine.jpg" data-name="emporerPalpatine">

        <h3>Your Character</h3>

    </div>



    <div class="row-enemies">

        <div id="enemies-sect1"></div>

        <div id="enemies-sect2"></div>

        <div id="enemies-sect3"></div>

    </div>



    <div class="row">

        <h3>Enemies Available to Attack</h3>

        <h3>Fight Section</h3>

        <button class="fight-button" txt-content="Fight Section">Fight!</button>

        <h3>Defender</h3>

    </div>



    <div class="row">

        <div id="defender-obj"></div>

        <h2 class="battle-log"></h2>

    </div>



    <!-- link JavaScript file -->

    <script src="assets/JavaScript/main.js"></script>

</body>



</html>

$(document).ready(function () {

    //globals

    var chosenEnemy = false;

    var chosenChampion = false;

    var attack = 0;

    var health = 0;

    var counterAttack = 0;



    // run when chosing and attacking champions

    var fightStats = {

        getAttributes: function (char1, char2) {

            char1.attack = char1.attack + 10;

            char1.health = char1.health;



            char2.health = char2.health;

            char2.counterAttack = char2.getCounterAttack + 10;

        },

        levelUp: function (char1, char2) {

                char.attack += 10;

                char.health += 100;

        },

    };



    // game characters and starting attributes

    var characters = {

        obiWan: {

            health: 150,

            attack: 20,

            counterAttack: 15,

            chosenChampion: false,

            chosenEnemy: false,

        },// best in game

        lukeSkywalker: {

            health: 100,

            attack: 30,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        },

        darthVader: {

            health: 100,

            attack: 25,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        },

        emporerPalpatine: {

            health: 90,

            attack: 25,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        }, // worst in game

    };



    // run on battle button

    function battle(char1, char2) {

        char1.health -= char2.counterAttack

        char2.health -= char1.attack

    };



    // $("#char1").attr(character.obiWan); not sure if i can use something like this

    // for the data-type attribute i added to the img tag or if something like this would work better.





    // character selection and movement between sections

    if (chosenChampion === false) {

        $("#char1").on("click", function () {

            $("#char2").appendTo($("#enemies-sect1"));

            $("#char3").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char1").data('chosenChampion', true);

        });

        $("#char2").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char3").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char2").data('chosenChampion', true);

        });

        $("#char3").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char2").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char3").data('chosenChampion', true);

        });

        $("#char4").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char2").appendTo($("#enemies-sect2"));

            $("#char3").appendTo($("#enemies-sect3"));

            $("#char4").data('chosenChampion', true);

        });

    };



    if (chosenEnemy === false && chosenChampion === false) {

        $("#ememies-sect1").on("click", function () {

            $("#enemies-sect1").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

        $("#ememies-sect2").on("click", function () {

            $("#enemies-sect2").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

        $("#ememies-sect3").on("click", function () {

            $("#enemies-sect3").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

    };



    function Game(char1, char2) {

        fightStats.getAttributes(char1, char2);

        battle(char1, char2);

        if (char2.health < 0) {

            fightStats.levelUp(char1, char2);

        };



    };



    $("#fight-button").on("click", function () {

        game($("#yourchar"), $("#defenderobj"))

    });





});

/* typeography */

h1 {

    color: teal;

}



/* display settings */

.row {

    display: block;

}



.fight-button {

    padding: 5px 30px;

}



/* image styling */

img {

    margin: 0 20px;

}



.row-enemies div {

    display: inline;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>

<html>



<head>

    <!-- metas for phones -->

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Star Wars Game</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/main.css" />

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</head>



<body>



    <div class="row">

        <h1>Star Wars RPG!</h1>

    </div>



    <div class="row" id="your-char">

        <img id="char1" src="assets/Images/obi-wan-kenobi.png" data-name="obiWan">

        <img id="char2" src="assets/Images/luke-skywalker.jpg" data-name="lukeSkywalker">

        <img id="char3" src="assets/Images/darth-vader.jpg" data-name="darthVader">

        <img id="char4" src="assets/Images/palpatine.jpg" data-name="emporerPalpatine">

        <h3>Your Character</h3>

    </div>



    <div class="row-enemies">

        <div id="enemies-sect1"></div>

        <div id="enemies-sect2"></div>

        <div id="enemies-sect3"></div>

    </div>



    <div class="row">

        <h3>Enemies Available to Attack</h3>

        <h3>Fight Section</h3>

        <button class="fight-button" txt-content="Fight Section">Fight!</button>

        <h3>Defender</h3>

    </div>



    <div class="row">

        <div id="defender-obj"></div>

        <h2 class="battle-log"></h2>

    </div>



    <!-- link JavaScript file -->

    <script src="assets/JavaScript/main.js"></script>

</body>



</html>

$(document).ready(function () {

    //globals

    var chosenEnemy = false;

    var chosenChampion = false;

    var attack = 0;

    var health = 0;

    var counterAttack = 0;



    // run when chosing and attacking champions

    var fightStats = {

        getAttributes: function (char1, char2) {

            char1.attack = char1.attack + 10;

            char1.health = char1.health;



            char2.health = char2.health;

            char2.counterAttack = char2.getCounterAttack + 10;

        },

        levelUp: function (char1, char2) {

                char.attack += 10;

                char.health += 100;

        },

    };



    // game characters and starting attributes

    var characters = {

        obiWan: {

            health: 150,

            attack: 20,

            counterAttack: 15,

            chosenChampion: false,

            chosenEnemy: false,

        },// best in game

        lukeSkywalker: {

            health: 100,

            attack: 30,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        },

        darthVader: {

            health: 100,

            attack: 25,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        },

        emporerPalpatine: {

            health: 90,

            attack: 25,

            counterAttack: 20,

            chosenChampion: false,

            chosenEnemy: false,

        }, // worst in game

    };



    // run on battle button

    function battle(char1, char2) {

        char1.health -= char2.counterAttack

        char2.health -= char1.attack

    };



    // $("#char1").attr(character.obiWan); not sure if i can use something like this

    // for the data-type attribute i added to the img tag or if something like this would work better.





    // character selection and movement between sections

    if (chosenChampion === false) {

        $("#char1").on("click", function () {

            $("#char2").appendTo($("#enemies-sect1"));

            $("#char3").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char1").data('chosenChampion', true);

        });

        $("#char2").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char3").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char2").data('chosenChampion', true);

        });

        $("#char3").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char2").appendTo($("#enemies-sect2"));

            $("#char4").appendTo($("#enemies-sect3"));

            $("#char3").data('chosenChampion', true);

        });

        $("#char4").on("click", function () {

            $("#char1").appendTo($("#enemies-sect1"));

            $("#char2").appendTo($("#enemies-sect2"));

            $("#char3").appendTo($("#enemies-sect3"));

            $("#char4").data('chosenChampion', true);

        });

    };



    if (chosenEnemy === false && chosenChampion === false) {

        $("#ememies-sect1").on("click", function () {

            $("#enemies-sect1").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

        $("#ememies-sect2").on("click", function () {

            $("#enemies-sect2").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

        $("#ememies-sect3").on("click", function () {

            $("#enemies-sect3").appendTo($("#defender-obj"));

            $("#defender-obj").data("chosenEnemy", true);

        });

    };



    function Game(char1, char2) {

        fightStats.getAttributes(char1, char2);

        battle(char1, char2);

        if (char2.health < 0) {

            fightStats.levelUp(char1, char2);

        };



    };



    $("#fight-button").on("click", function () {

        game($("#yourchar"), $("#defenderobj"))

    });





});

/* typeography */

h1 {

    color: teal;

}



/* display settings */

.row {

    display: block;

}



.fight-button {

    padding: 5px 30px;

}



/* image styling */

img {

    margin: 0 20px;

}



.row-enemies div {

    display: inline;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>

<html>



<head>

    <!-- metas for phones -->

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Star Wars Game</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/main.css" />

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</head>



<body>



    <div class="row">

        <h1>Star Wars RPG!</h1>

    </div>



    <div class="row" id="your-char">

        <img id="char1" src="assets/Images/obi-wan-kenobi.png" data-name="obiWan">

        <img id="char2" src="assets/Images/luke-skywalker.jpg" data-name="lukeSkywalker">

        <img id="char3" src="assets/Images/darth-vader.jpg" data-name="darthVader">

        <img id="char4" src="assets/Images/palpatine.jpg" data-name="emporerPalpatine">

        <h3>Your Character</h3>

    </div>



    <div class="row-enemies">

        <div id="enemies-sect1"></div>

        <div id="enemies-sect2"></div>

        <div id="enemies-sect3"></div>

    </div>



    <div class="row">

        <h3>Enemies Available to Attack</h3>

        <h3>Fight Section</h3>

        <button class="fight-button" txt-content="Fight Section">Fight!</button>

        <h3>Defender</h3>

    </div>



    <div class="row">

        <div id="defender-obj"></div>

        <h2 class="battle-log"></h2>

    </div>



    <!-- link JavaScript file -->

    <script src="assets/JavaScript/main.js"></script>

</body>



</html>

jquery html

edited Nov 12 '18 at 21:59

asked Nov 12 '18 at 20:37

Matt Taliancich

108

edited Nov 12 '18 at 21:59

asked Nov 12 '18 at 20:37

Matt Taliancich

108

edited Nov 12 '18 at 21:59

asked Nov 12 '18 at 20:37

Matt Taliancich

108

asked Nov 12 '18 at 20:37

Matt Taliancich

108

asked Nov 12 '18 at 20:37

Matt Taliancich

108

1

$("#char1") returns a jQuery object, containing at most one element whose id is char1. When you do $("#char1").character[chosenChampion] you are trying to access a property of character on the jQuery object. Unless you have done some custom logic to add that property to the jQuery object, that is not a standard property that jQuery has and will be undefined.
– Taplar
Nov 12 '18 at 20:40

that's why i tried adding data-type to the img tag that has the image stored, but now im thinking that it isnt enough and i should just add all the character attributes to new div's or something and take out the img tags all together?
– Matt Taliancich
Nov 12 '18 at 20:52

also i basically know which characters are going where so should i just change that bit of logic to just say obiWan since he is who is going to be put there?
– Matt Taliancich
Nov 12 '18 at 20:53

In that case, change data-name="character.obiWan" to data-name="obiWan" and you can get it with $(whateverId).data('name') and then you can stick that inside characters object.
– Taplar
Nov 12 '18 at 20:54

so the data name doesn't need the object reference and the id to change the property of chosen champion for this one would go like $("#char1").data('chosenChampion') = true; ?
– Matt Taliancich
Nov 12 '18 at 21:12

|
show 2 more comments

1

$("#char1") returns a jQuery object, containing at most one element whose id is char1. When you do $("#char1").character[chosenChampion] you are trying to access a property of character on the jQuery object. Unless you have done some custom logic to add that property to the jQuery object, that is not a standard property that jQuery has and will be undefined.
– Taplar
Nov 12 '18 at 20:40

that's why i tried adding data-type to the img tag that has the image stored, but now im thinking that it isnt enough and i should just add all the character attributes to new div's or something and take out the img tags all together?
– Matt Taliancich
Nov 12 '18 at 20:52

also i basically know which characters are going where so should i just change that bit of logic to just say obiWan since he is who is going to be put there?
– Matt Taliancich
Nov 12 '18 at 20:53

In that case, change data-name="character.obiWan" to data-name="obiWan" and you can get it with $(whateverId).data('name') and then you can stick that inside characters object.
– Taplar
Nov 12 '18 at 20:54

so the data name doesn't need the object reference and the id to change the property of chosen champion for this one would go like $("#char1").data('chosenChampion') = true; ?
– Matt Taliancich
Nov 12 '18 at 21:12

$("#char1") returns a jQuery object, containing at most one element whose id is char1. When you do $("#char1").character[chosenChampion] you are trying to access a property of character on the jQuery object. Unless you have done some custom logic to add that property to the jQuery object, that is not a standard property that jQuery has and will be undefined.
– Taplar
Nov 12 '18 at 20:40

that's why i tried adding data-type to the img tag that has the image stored, but now im thinking that it isnt enough and i should just add all the character attributes to new div's or something and take out the img tags all together?
– Matt Taliancich
Nov 12 '18 at 20:52

also i basically know which characters are going where so should i just change that bit of logic to just say obiWan since he is who is going to be put there?
– Matt Taliancich
Nov 12 '18 at 20:53

In that case, change data-name="character.obiWan" to data-name="obiWan" and you can get it with $(whateverId).data('name') and then you can stick that inside characters object.
– Taplar
Nov 12 '18 at 20:54

so the data name doesn't need the object reference and the id to change the property of chosen champion for this one would go like $("#char1").data('chosenChampion') = true; ?
– Matt Taliancich
Nov 12 '18 at 21:12

|
show 2 more comments

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53269713%2fvariable-undefined-in-jquery-rpg-game%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk