Solved

Display Array No!!

Posted on 2006-11-17
6
210 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
  • 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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now