View Full Version : ParseInt doesn't work in code

12-01-2008, 02:05 AM
1) I can't figure out why parseInt doesn't work in the function changePhotograph(). If you click on either arrow, it will run this function. It pulls up the id of the main photograph, finds its source and then isolates the section of the img source name ie. photo10. Then I do a parseInt on it. It keeps returning NaN. Can anyone help? Why won't it take the photo10 and return 10?
2) I was actually hoping to be able to click on the arrow and go forward or backward in the photo gallery- to work through the array on each click BUT I can't figure out how to maintain the array index between clicks as a global variable. I've tried using a static code I found but I can't get that to work either. Does anyone have any suggestions?
I know there are tons of photo galleries out there but I'm trying to learn javascript by creating my own.

Here's the html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio New</title>
<script type="text/javascript" src="portfolioNew.js"></script>
<link href="portfolioNew.css" rel="stylesheet" type="text/css" />


<div id="imageContainer">
<div id="photoFrame" >
hello </div>
<p><img src="images/portfolio/Clients/photo10.jpg" alt="test image" /></p>


<ul id="portfolioArrows">
<li><a href="" title="1"><img src="images/portfolio/left_arrow.jpg" alt="Move gallery left" /></a></li>
<li><a href="" title="-1")><img src="images/portfolio/right_arrow.jpg" alt="Move gallery right" /></a></li>


See it here.

Javascript (problem is in the function changePhotograph() ):

window.onload = slideshowinit;

var numberslide=new Array();

//Sets up the array to create the links to images
numberslide[1]=["images/content/Clients/photo2.jpg", ""]
numberslide[2]=["images/content/Clients/photo3.jpg", ""]

function slideshowinit() {
var counter = numberslide.length;
//Get the width of the current picture
var imageContainer = document.getElementById("imageContainer");
var currentImage = imageContainer.getElementsByTagName("img");
//currentImage.src = numberslide[index];

//Get the left and right arrows

var portfolioArrows = document.getElementById("portfolioArrows");
var arrowLinks = portfolioArrows.getElementsByTagName("a");
arrowLinks[0].onclick = changePhotograph;
arrowLinks[1].onclick = changePhotograph;


function changePhotograph(){
var imageContainer = document.getElementById("imageContainer");
var currentImageList = imageContainer.getElementsByTagName("img");
var currentImage = currentImageList[0].src;

var positionOfLastperiod = currentImage.lastIndexOf(".");
var positionOfLastForwardSlash = currentImage.lastIndexOf("/");
var mySubString = currentImage.substring(positionOfLastForwardSlash + 1,positionOfLastperiod );

return false;

12-01-2008, 02:10 AM

If the first character cannot be converted to a number, parseInt returns NaN.


12-01-2008, 04:22 PM
So I have to find the number characters. Okay. Thanks

12-01-2008, 05:05 PM
Here is one way to do it:

var str = "photo1.jpg";
var re = /^photo(\d+).jpg$/i;
var matchNum = str.match(re);
var num = (matchNum.length==2)?parseInt(matchNum[1],10):0;


var str = "photo1.jpg";
var re = /^photo(\d+).jpg$/i;
var matchNum = str.replace(re,"$1");
var num = parseInt(matchNum,10);


var str = "photo1.jpg";
var matchNum = str.substr(5,str.indexOf("."));
var num = parseInt(matchNum,10);

There are plenty of other ways.


12-01-2008, 06:50 PM
Thanks Eric. I can take it from here. I was just hoping the parseInt would be a shortcut.