Justin Besteman Justin Besteman - 1 month ago 9
Javascript Question

JavaScript, Trying to get buttons to move on click

/*
var young_link = {
power: 30,
cpower: 20,
hp: 3,
image: "../images/young_link.jpg",
};


var young_zelda = {
power: 30,
cpower: 20,
hp: 3,
}


var impa = {
power: 30,
cpower: 20,
hp: 3,
}


var hey = {
power: 30,
cpower: 20,
hp: 3,
}

//$("#test").html(young_link);

console.log(young_link);*/


$(document).ready(function() {

var hero_image = new Array();
hero_image[0] = new Image();
hero_image[0].src = 'assets/images/link.png';
hero_image[0].id = 'image';

hero_image[1] = new Image();
hero_image[1].src = 'assets/images/bongo.png';
hero_image[1].id = 'image';

hero_image[2] = new Image();
hero_image[2].src = 'assets/images/gandondorf.jpg';
hero_image[2].id = 'image';

hero_image[3] = new Image();
hero_image[3].src = 'assets/images/queen.png';
hero_image[3].id = 'image';


//var test = "<img src= '../images/young_link.jpg'>";

//var young_hero = ["young_link","young_zelda","impa", "malon"];
var young_hero = ["Link", "Bongo Bongo","Gandondorf","Queen Gohma"];
var health = [100, 70, 120, 50];


for (var i = 0; i < young_hero.length; i++) {
var hero_btns = $("<buttons>");

hero_btns.addClass("hero hero_button");

hero_btns.attr({"data-name":young_hero[i],"data-health":health[i],"data-image":hero_image[i]});


hero_btns.text(young_hero[i]);
hero_btns.append(hero_image[i]);
hero_btns.append(health[i]);

$("#buttons").append(hero_btns);
}




$(".hero_button").on("click" , function() {

var battle_ground = $("<div>");

battle_ground.addClass("hero hero_button");

battle_ground.text($(this).data("data-name"));

$("#battle").append(battle_ground);

});

});





The for loop is working and appending the buttons on the screen. But in $(".hero_button").on("click" , function() it is just putting a empty box on the page with a click. So, it is not taking the data that is attached to the button.

Answer

A couple of changes to get the data set and read correctly:

  1. make button tags instead of buttons
  2. use .attr() instead of .data() to get the attributes

See comments inline in the code below.

Also, instead of adding an attribute for the Image object of each item (which will add an attribute like data-image="[Object object]") just add an integer corresponding to the iterator index and use that to reference into the hero_image array when you need to get the corresponding image.

$(document).ready(function() {

  var hero_image = new Array();
  hero_image[0] = new Image();
  hero_image[0].src = 'assets/images/link.png';
  hero_image[0].id = 'image';

  hero_image[1] = new Image();
  hero_image[1].src = 'assets/images/bongo.png';
  hero_image[1].id = 'image';

  hero_image[2] = new Image();
  hero_image[2].src = 'assets/images/gandondorf.jpg';
  hero_image[2].id = 'image';

  hero_image[3] = new Image();
  hero_image[3].src = 'assets/images/queen.png';
  hero_image[3].id = 'image';

  var young_hero = ["Link", "Bongo Bongo", "Gandondorf", "Queen Gohma"];
  var health = [100, 70, 120, 50];
  for (var i = 0; i < young_hero.length; i++) {
    var hero_btns = $("<button>");
    hero_btns.addClass("hero hero_button");
    hero_btns.attr({
      "data-name": young_hero[i],
      "data-health": health[i],
      //instead of adding an attribute for the image object, just add an index
      "data-index": i
    });


    hero_btns.text(young_hero[i]);
    hero_btns.append(hero_image[i]);
    hero_btns.append(health[i]);

    $("#buttons").append(hero_btns);
  }

  $(".hero_button").on("click", function() {
    var battle_ground = $("<div>");
    battle_ground.addClass("hero hero_button");
    //use .attr() here instead of .data()
    battle_ground.text($(this).attr("data-name"));

    /** My additions  - 
     * I am not sure exactly how this should be done  
     * so adjust accordingly 
     **/
    //additionally, you can add attributes to the new battle_ground item
    battle_ground.attr('data-health',$(this).attr("data-health"));

    battle_ground.append(hero_image[$(this).attr("data-index")]);
    battle_ground.append($(this).attr("data-health"));
    /** End my additions **/

    $("#battle").append(battle_ground);
  });
});
#battle div {
  border: 1px solid #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons"></div>
Battle ground:
<div id="battle"></div>