how to display an image from a javascript array in a pre-defined html table

Question

Hi I'm a student currently doing an html and javascript project. I originally came to this site to look for a way to take an image from a javascript array that's referenced in another array and display it in a pre-defined html table.

As to be expected I never found an exact answer to the problem but managed to work my own way to the solution using bits and pieces of code and knowledge provided from a variety of posts and users answering said posts.

Now that it works I'd like to ask all of you if you could help me to simplify the code or if you could suggest alternate, easier ways of doing this in the future.

I'm a newling to both javascript and html. I'm using Firefox and I've yet to use jquery.

Here's the code from the html page in question.

  <body>
    <table border="4px">
      <caption>
        Pet Table
      </caption>
      <tr>
        <!-- Images-->
        <td>
          <script>
            display(bat)
          </script>;
        </td>
        <td>
          <script>
            display(goat)
          </script>
        </td>
        <td>
          <script>
            display(butterfly)
          </script>
        </td>
      </tr>
    </table>
  </body>

Here's the javascript with three examples.

        function pet(species, name, colour, size, food, limb, img) {
            this.species = species; //property of a pet
            this.name = name; //property of a pet
            this.colour = colour; //property of a pet
            this.size = size; //property of a pet
            this.food = food; //property of a pet
            this.limb = limb; //property of a pet
            this.img = img; //property of a pet         
            this.move = move; //a function of a pet defined to the pet

          }
          //array for images used in the pet array

        var imgArray = new Array();
        imgArray[0] = new Image();
        imgArray[0].src = "resources/bat.gif";
        imgArray[0].height = "200";
        imgArray[0].width = "200";

        imgArray[1] = new Image();
        imgArray[1].src = "resources/goatVec01.png";
        imgArray[1].height = "200";
        imgArray[1].width = "200";

        imgArray[2] = new Image();
        imgArray[2].src = "resources/butterfly.gif";
        imgArray[2].height = "200";
        imgArray[2].width = "200";

<!-- more images -->


        //adding variables to the pet array
        var bat = new pet("fruit bat", "bats", "grey", "small", "apples", "wings", "0", move);

        var goat = new pet("goat", "bastard", "off white", "goat-sized", "clothing", "hooves", "1", move);

        var butterfly = new pet("butterfly", "flutterby", "rainbow", "petite", "nectar", "wings", "2", move);

<!-- more variables -->


 //function used to call and display the images
        function display(pet) {
          var i = document.write(imgArray[pet.img].outerHTML);
        }

If I many ask a second question. Since I started using Firefox I've had to use this bit of code to get html to work properly but I'd like to know if there's another method to do this apart from adding these to every page.

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

List of posts that were a great help

Image from an array HTML Javascript

How to display an image thats in an array? JavaScript

How to display image with javascript?

The character encoding of the HTML document was not declared

score 0 · Accepted Answer · answered Mar 12 '15 at 09:56

0

First question, you'd want to give all your elements id's. This way you can reference them with javascript.

Second question, in real world application programming you will create ssi files for all of your websites. SSI stands for service side include. Then you will just enter the information 1 time in an ssi file and that file will automatically places those meta tags in every webpage you are loading. If you are a student in programming, I am guessing that is something that will be covered in your classes at some point.

answered Mar 12 '15 at 09:56

kayleighsdaddy

670
5
15

1

Thank you for answering. Would giving the elements in this project id's simplify the code? I haven't worked with id's all that much yet and while I did consider and test the option, I didn't understand it well enough to implement just yet. (By that I mean initial attempts didn't run so I went looking for an alternative.) So an SSI is a file that only contains the meta tags for browsers. Do you think it'll be worthwhile to make an SSI for this project then save it for future projects or can it only be used to use for one at a time? – Hugo van Dyk Mar 12 '15 at 10:28
An SSI file has any information in it you want. Normally, you'd place any information that is repeated on every webpage in an ssi file. And yes you can make an SSI file for this project and save it for future projects. That is basically what I do. As far as ID's making the code simplified, I do believe id's make it easier to read. Because you can reference every element by the id. here is a website about dom elements http://www.w3schools.com/js/js_htmldom_elements.asp – kayleighsdaddy Mar 12 '15 at 23:44
1

Thank you for the link. I'll be making good use of that website. – Hugo van Dyk Mar 13 '15 at 11:41

how to display an image from a javascript array in a pre-defined html table

1 Answers1