Display Array No!!

Posted on 2006-11-17
Medium Priority
Last Modified: 2008-01-09
Hopefully this will be very simple for most for most of you, but I am not the best at js.

I am developing a site that displays an image with next and previous links to scroll through the images in my array. I am trying to display the image No that they are currently viewing / total images. Here is my code so far.

<script language="JavaScript">

var selectedImage = 1;
var numImages = 7;
var img = new Array();
img[1] = "img/prop/6/1.jpg";
img[2] = "img/prop/6/2.jpg";
img[3] = "img/prop/6/3.jpg";
img[4] = "img/prop/6/4.jpg";
img[5] = "img/prop/6/5.jpg";
img[6] = "img/prop/6/6.jpg";
img[7] = "img/prop/6/7.jpg";

function swapImageRight(){
      if (selectedImage < numImages){

function swapImageLeft(){
      if (selectedImage > 1){
            selectedImage = selectedImage - 1;


And in the body above the next and previous buttons I have:

<script language="JavaScript">document.write('1' + '/' + numImages);</script>

How do i get the '1' to change dynamicaly to show the array no im viewing?? here is my site so you can see what i mean:


Thanks in advance for any help.

Question by:james1977
  • 3
  • 3
LVL 54

Expert Comment

ID: 17966895

The problem is using document.write.  The document (i.e. page) has already been written and closed.  That's OK though because there is a really cool way to do it.  Change the script tag and use a div or span tag instead.  Provide that tag with a unique id.  Then we use innerHTML to "write" the content of that div/span.  With that we can write the 1/7 and then change it as needed.  Whether you use a div or span tag for that spot depends on the page layout and if it needs to be inline (i.e. span) or not (i.e. div).

You write content to an element with script like this ...

document.getElementById("uniqueID").innerHTML = "1/7";

Put the div/span's id in place of uniqueID in the line above.

This should give you a basic idea at least.  Let me know if I misunderstood what you want or if you need help getting it to work in the page.  Let me know if you have any questions or need more information.


Author Comment

ID: 17977774
Thanks for the reply B0lsc0tt, only just seen it, i'll have a little look and see if I can get my head round it.

Thanks again.


Author Comment

ID: 17977878
Sorry b0lsc0tt, when I said im not the best at Javascript, what I actually meant was that im a complete dunce at it.

I had a quick go at what you said but i've not got a clue what im doing, would it be possible for you to run me through it?

Sorry again, I hate being rubbish at things! Better get a javascript for dummies book!
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

LVL 54

Accepted Solution

b0lsc0tt earned 200 total points
ID: 17983522
I will make some changes to your code that you can try ...

                  <td colspan="2"><div align="center" id="picDisplay"><script language="JavaScript">document.write(selectedImage + '/' + numImages);</script></div></td>

Then in the 2 swap image functions add a line like this ...

  document.getElementById("picDisplay").innerHTML=selectedImage + '/' + numImages;

That line should probably be one of the last lines.  It definitely needs to be after you change the selectedImage value.

Let me know if you have any questions or have a problem.


Author Comment

ID: 17985979
Thanks B0lsc0tt that worked perfectly!!!

Really appreciate your help thanks again!

LVL 54

Expert Comment

ID: 17988531
Your welcome!  I'm glad that I could help you.  Thank you for the grade, the points and the fun question.  Enjoy learning Javascript and I'll see you around. :D


Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question