Solved

Display Array No!!

Posted on 2006-11-17
6
217 Views
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){
            ++selectedImage;
            document.image.src=img[selectedImage];
            
      }
}

function swapImageLeft(){
      if (selectedImage > 1){
            selectedImage = selectedImage - 1;
            document.image.src=img[selectedImage];
      }
}

</script>

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:

http://www.homematch.co.uk/map/sample-detail.asp?PID=1

Thanks in advance for any help.

James.
0
Comment
Question by:james1977
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17966895
james1977,

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.

b0lsc0tt
0
 

Author Comment

by:james1977
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.

James.
0
 

Author Comment

by:james1977
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!
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 54

Accepted Solution

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

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

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.

bol
0
 

Author Comment

by:james1977
ID: 17985979
Thanks B0lsc0tt that worked perfectly!!!

Really appreciate your help thanks again!

James.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
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

bol
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

688 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