Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ParseInt doesn't work in code

    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">
    <head>
    <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" />
    </head>

    <body>

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

    </div>

    <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>
    </ul>

    </body>
    </html>

    See it here.
    http://rebeccarachael.com/portfolioNew.html

    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[0]=["images/content/Clients/photo1.jpg"]
    numberslide[1]=["images/content/Clients/photo2.jpg", ""]
    numberslide[2]=["images/content/Clients/photo3.jpg", ""]



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

    //alert(currentImage[0].height);
    //alert(currentImage[0].width);
    //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;
    //alert(typeof(currentImage));


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

    return false;
    }

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    https://developer.mozilla.org/en/Cor...tions/parseInt

    If the first character cannot be converted to a number, parseInt returns NaN.
    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So I have to find the number characters. Okay. Thanks

  • #4
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Here is one way to do it:

    Code:
    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;
    alert(num);
    or

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

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

    There are plenty of other ways.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Eric. I can take it from here. I was just hoping the parseInt would be a shortcut.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •