Home/ Questions/Q 6016025
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T02:55:26+00:00

I am trying to create a contacts page and trying to populate the contacts

  • 0

I am trying to create a contacts page and trying to populate the contacts image and name. I am able to display the array of names but not the array of pictures. Just the first picture is displayed.

I am also trying to align the contact and the image in one row. But the contact image is
displayed first then the contact name is displayed.

Here goes the code:

<script language="javascript" type="text/javascript">

function showContacts()
{
    var myContacts=["abc","def","xyz"]; // literal array

    for (var i=0;i<myContacts.length;i++)
    {
        document.getElementById('contact').innerHTML += myContacts[i]+"<br>";
        //document.write(myArray[i]);
    }
}
function preloader() 
{
    var myPhoto=["some photos"]; // literal array
    // create object
    var img=document.getElementById('photo');
    // start preloading
    for(var i=0; i< myPhoto.length; i++) 
    {
        img.src += myPhoto[i]+"<br>";
        //document.write(i);
        //img.setAttribute('src',myPhoto[i]); 
     }
 } 

</SCRIPT>


<body onload="showContacts();preloader();">

<table width="100%" style="height: 100%;" border="0"><tr>
    <col colspan="1" ><image id="photo"/>

    <col  colspan="1" ><p id="contact"/>

</tr></table>
</body>
</html>

What am I missing?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to add multiple images to the page. You can do that in javascript.

    <table width="100%" style="height: 100%;" border="0">
  <tr>
    <td><p id="photos" /></td>
    <td><p id="contacts" /></td>
  </tr>
</table>


var container = document.getElementById("photos");

for (var i=0, len = myPhoto.length; i < len; ++i) {
     var img = new Image();
     img.src = myPhoto[i];
     container.appendChild(img);
}

    UPDATE: this is a simple demo how to add multiple images to the DOM. What you probably want to achieve is that you have multiple table rows with one name & image per row. To accomplish that, you have to create/append new rows/cells using document.createElement (or a framework like jQuery).

    UPDATE 2 – added a demo which adds multiple rows (one per contact):

    http://jsfiddle.net/roberkules/WRgjv/

    • 0