In JavaScript, Displaying pictures from an array?

Question

I am making an rpg game. So I am trying to make a for loop that will generate buttons to the screen this what I have so far,

$(document).ready(function() {
    var imgArray = new Array();
    imgArray[0] = new Image();
    imgArray[0].src = 'assets/images/young_link.jpg';

    //var test = "<img src= '../images/young_link.jpg'>";
    //var young_hero = ["young_link","young_zelda","impa", "malon"];
    var young_hero = ["young_link"];
    //var hero_images = [test];

    for (var i = 0; i < young_hero.length; i++) {
        var hero_btns = $("<buttons>");
        hero_btns.addClass("hero");
        hero_btns.attr("data-hero" , young_hero[i]);
        hero_btns.attr("data-image" , imgArray[i]);
        hero_btns.text(imgArray[i]);
        hero_btns.text(young_hero[i]);
        $("#buttons").append(hero_btns);
    }
});

The problem is that it is not putting the image on the button.

Answer 1

In order to add an image to your button, you will have to do more than just data-image , You will need to actually create an <img> tag and give it the source of the image. Then you will need to use css to get the image lined up properly in your button.

I have updated your code to add the image to the first button.

 $(document).ready(function() { var imgArray = new Array(); imgArray[0] = new Image(); imgArray[0].src = 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT7o2tCpqvs_XRpvtHbuRe9KwkzydiVhWLJ6YVTkQcpkev09w0MBCgNu2w'; //var test = "<img src= '../images/young_link.jpg'>"; var young_hero = ["young_link","young_zelda","impa", "malon"]; //var young_hero = ["young_link"]; //var hero_images = [test]; for (var i = 0; i < young_hero.length; i++) { var hero_btns = $("<button>"); // changed from <buttons> hero_btns.addClass("hero"); hero_btns.attr("data-hero" , young_hero[i]); //hero_btns.text(imgArray[i]); hero_btns.text(young_hero[i]); hero_btns.append(imgArray[i]) $("#buttons").append(hero_btns); } }); 

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

Answer 2

Not sure about your exact requirement. Seems you are trying to create a button inside another button.

If you want to add an image use img tag and its src attribute

Not tested but you can try this

$(document).ready(function() {
  var imgArray = new Array();
  imgArray[0] = new Image();
  imgArray[0].src = 'assets/images/young_link.jpg';
  var young_hero = ["young_link"];
  for (var i = 0; i < young_hero.length; i++) {
    var hero_btns = $("<img>");
        hero_btns.addClass("hero");
        hero_btns.attr("data-hero", young_hero[i]);
    hero_btns.attr("src", imgArray[i]);
        hero_btns.text(imgArray[i]);
    hero_btns.text(young_hero[i]);

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

Answer 3

    $(function(){
var heroList = {
{heroName: "young_link", imagePath: "assets/images/young_link.jpg"},
{heroName: "young_zelda", imagePath: "assets/images/young_zelda.jpg"},
{heroName: "impa", imagePath: "assets/images/impa.jpg"},
{heroName: "young_link1", imagePath: "assets/images/young_link1.jpg"}];

 for (var i = 0; i < heroList.length; i++) {
        var hero_btns = $('<img class="hero">');

        hero_btns.attr({
        "data-index": i,
        "src": heroList[i].imagePath,
         "data-name": heroList[i].heroName,
         "title": heroList[i].heroName
        });
        $("#buttons").append(hero_btns);
    }

})

You can use this simple on jsfiddle example.