Displaying an image in a table from Javascript
Question
I'm a student and what I'm trying to do here is to build a table from Javascript using arrays stored in the Javascript. The table works well enough but I can't seem to integrate the Images into the table. No matter what I try the ImgArray remains undefined. Could any of you point me in the right direction of getting this to work?
var pet = [{ species: 'fruit bat', name: 'bats', colour: 'grey', size: 'small', food: 'apples', limb: "wings", img: "0" }, { species: 'goat', name: 'bastard', colour: 'off white', size: 'goat-sized', food: 'clothing', limb: "hooves", img: "1" }, { species: 'butterfly', name: 'flutterby', colour: 'rainbow', size: 'petite', food: 'nectar', limb: "wings", img: "2" }, { species: 'buzzard', name: 'Buzz', colour: 'molted black and white', size: 'bigish', food: 'carrion', limb: "wings", img: "3" }, { species: 'pixie', name: 'petty', colour: 'blue', size: 'tiny', food: 'souls', limb: "wings", img: "4" }, { species: 'tortoise', name: 'Tank', colour: 'Green', size: 'smoothbacked', food: 'lettuce', limb: "legs", img: "5" }]; //array for holding images for the pet array imgArray = []; imgArray[1] = new Image(); imgArray[1].src = "resources/bat.gif"; //source of the image imgArray[2] = new Image(); imgArray[2].src = "resources/goatVec01.png"; imgArray[3] = new Image(); imgArray[3].src = "resources/butterfly.gif"; imgArray[4] = new Image(); imgArray[4].src = "resources/buzzard01.png"; imgArray[5] = new Image(); imgArray[5].src = "resources/breezie01.png"; imgArray[6] = new Image(); imgArray[6].src = "resources/turtle.gif"; var len = imgArray.length; function display() { //added a for loop var i; for (i = 0; i < len; ++i) { var pic = document.write(imgArray[i].outerHTML); } } function makeTr(pet, attrName) { var html = '', i; html += "<tr>"; for (i = 0; i < pet.length; ++i) { if (attrName = "img") { document.getElementById("pic".outerHTML) html += "<td>" + display() + "</td>"; } else { html += "<td>" + pet[i][attrName] + "</td>"; } html += "</tr>"; return html; } } function buildTable(pet) { var html = ''; html += "<table border='4px'>"; html += "<caption>Pets Avaliable</caption>"; html += makeTr(pet, "species"); html += makeTr(pet, "name"); html += makeTr(pet, "colour"); html += makeTr(pet, "size"); html += "</table>"; document.getElementById("work").innerHTML = html; }
<!DOCTYPE html> <html> <head> <!-- Used to declare the character for use in Firefox. http://stackoverflow.com/questions/11996257/the-character-encoding-of-the-html-document-was-not-declared--> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"></meta> <meta content="utf-8" http-equiv="encoding"></meta> <title>Pets</title> <script type="text/javascript" src="java01.js"> </script> <body> <button id="please" onclick="buildTable(pet)">Work</button> <p id="work"></p> </body> </html>
1 answers
solution1
0 2015-03-25 04:55:32
You are trying to access an undefined array location. You should access your image array using the indexes that you defined:
var pic = document.write(imgArray[1].outerHTML);
I recommend passing the index that you need to as a parameter to the display function as you run your for loop. You can pass the for loop counter i but you will need to re-index your image array since i=0 .
function display(imgIdx) {
var pic = document.write(imgArray[imgIdx].outerHTML);
}
I took a closer look at your code and i found a whole bunch of problems which I went ahead and fixed and everything worked fine. I will not give you the full answer otherwise you won't learn much. I will simply advise you as to where you have mistakes.
First this if statement is wrong:
if (attrName = "img")
Second your pets variable is a global variable so you do not need to pass it as a parameter to every single function.Avoid global variables since you can very easily overwrite them accidentally.
`function buildTable(pet) //remove parameter
function makeTr(pet, attrName) //remove pet parameter`
Instead of a global make a function called getPets() that returns pet and call it from inside your makeTr() function since it is the only function that uses it.
Third Do not use document.write because it will overwrite the entire page not assign html to a variable or whatever the heck you though you were doing.
nth There are a several other problems and improvements you must make, too many to put here. Just follow my original advice and all this new ones and do some more debugging and more hard work and you'll get it. One last thing in your buildTable function you never make a call to makeTr("img"); so no images wil ever show. The only reason they did show before is because of what is said on my First comment which is a learners mistake so I understand.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.