access and display objects from an array

Question

 $(document).ready(function () { var cardplace = 1; var card = [ { name: "Lord salazar" , atk: "12" , def: "3" , id: "1" } , { name: "Master manga" , atk: "8" , def: "10" , id: "2" } ]; $("#draw").click(function drawcard() { var monster = card[Math.floor(Math.random() * card.length)]; $('#' + cardplace).append('<div class="card"><div class="title"></div><div class="atk"></div><div class="def"></div>'); $(".title").text(monster.name); $(".atk").text(monster.atk); $(".def").text(monster.def); cardplace = cardplace + 1; console.log(cardplace); }); });

 .card-place{ width: 200px; height: 275px; background-color: saddlebrown; margin: 20px; float: left; } .card{ width: 180px; height: 255px; background-color: brown; overflow: auto; padding: 10px; } .title{ width: 100%; height: 30px; background-color: burlywood; margin-bottom: 10px; } .atk{ background-color: burlywood; width: 40px; height: 40px; float: left; } .def{ background-color: burlywood; width: 40px; height: 40px; float: right; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <button id="draw">draw</button> <div class="card-place" id="1"> </div> <div class="card-place" id="2"></div> <div class="card-place" id="3"></div> </body>

I would like to show a random object each time I click on the button with id #draw. The object appears, but it always replaces the other object in the variable monster. So I can't have different objects at the same time. Currently I have this :

$(document).ready(function () {
var cardplace = 1;
var monster = [];
var card = [
    {
        name: "monster 1"
        , atk: "12"
        , def: "3"
    }
    , {
        name: "monster 2"
        , atk: "8"
        , def: "10"
    }
];
$("#draw").click(function drawcard() {
    monster[cardplace] = card[Math.floor(Math.random() * card.length)];
    $('#' + cardplace).append('<div class="card"><div class="title"></div><div class="atk"></div><div class="def"></div>');
    $(".title").text(monster[cardplace].name);
    $(".atk").text(monster[cardplace].atk);
    $(".def").text(monster[cardplace].def);
    cardplace = cardplace + 1;
    console.log(cardplace);
});
});

here is the html

 <button id="draw">draw</button>
<div class="card-place" id="1">


</div>
<div class="card-place" id="2"></div>
<div class="card-place" id="3"></div>

Answer 1

You are selecting each .title , .atk and .def element within click handler. You can create a variable to represent current #1 , #2 or #3 element, then set context of jQuery() call to the current context.

 $(document).ready(function() { var cardplace = 1; var card = [{ name: "Lord salazar", atk: "12", def: "3", id: "1" }, { name: "Master manga", atk: "8", def: "10", id: "2" }]; $("#draw").click(function drawcard() { var monster = card[Math.floor(Math.random() * card.length)]; var place = $('#' + cardplace); place.append('<div class="card"><div class="title"></div><div class="atk"></div><div class="def"></div>'); // set `context` to `place` at each of `jQuery()` call below $(".title", place).text(monster.name); $(".atk", place).text(monster.atk); $(".def", place).text(monster.def); if (cardplace === $("[class|=card][id]").length) { cardplace = 1 } else { cardplace += 1; }; }); });

 .card-place { width: 200px; height: 275px; background-color: saddlebrown; margin: 20px; float: left; } .card { width: 180px; height: 255px; background-color: brown; overflow: auto; padding: 10px; } .title { width: 100%; height: 30px; background-color: burlywood; margin-bottom: 10px; } .atk { background-color: burlywood; width: 40px; height: 40px; float: left; } .def { background-color: burlywood; width: 40px; height: 40px; float: right; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <button id="draw">draw</button> <div class="card-place" id="1"></div> <div class="card-place" id="2"></div> <div class="card-place" id="3"></div> </body>

access and display objects from an array

Question

1 answers

solution1
0 2017-02-11 23:13:16

access and display objects from an array

Question

1 answers

solution1 0 2017-02-11 23:13:16

solution1
0 2017-02-11 23:13:16