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.

$("<buttons>"); is not a valid selector. If you're trying to select all <button> elements, do $('button'); — Tyler Roper
– Tyler Roper, Commented Oct 20, 2016 at 18:02
Create a class or a mapping of hero name to image path. Parallel arrays are bad practice. — Mr. Polywhirl
– Mr. Polywhirl, Commented Oct 20, 2016 at 18:03

Mobius · Accepted Answer · 2016-10-20 18:09:04Z

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>

edited Oct 20, 2016 at 18:09

answered Oct 20, 2016 at 18:03

Mobius

2,8961 gold badge22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mobius Over a year ago

you are right, i was reading too quickly. The example above uses it properly.

brk · Accepted Answer · 2016-10-20 18:04:34Z

0

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

answered Oct 20, 2016 at 18:04

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

BurakBaskak · Accepted Answer · 2016-10-20 18:15:06Z

0

    $(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.

answered Oct 20, 2016 at 18:15

BurakBaskak

464 bronze badges

Collectives™ on Stack Overflow

In JavaScript, Displaying pictures from an array?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related