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 to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help with buttons and arrays

    Hello all,

    To keep things short I need help making the next part of myStory show with each press of the button, and then make it return to the first page after the last. What I currently have displays the first part of my story with the first button press but the second press displays "NaN". I'm new to programming so describing things in the simplest way possible with example lines of code would be extremely appreciated. Thanks in advance for all your help!!!

    Here is my JS code:
    Code:
    // JavaScript Document
    function OnPress ()
    {
    	document.getElementById("story").innerHTML = myStory[0];
    	myStory++;
    	if(myStory==myStory.length)
    	myStory=0;
    }
    
    var myStory=new Array ();
    myStory[0]="5/27/13 - The following journal entries serve as a record of my confrontations with the Tall Man.  This all started when my old friend Dan went missing in the forest behind the old Northern Michigan Asylum in Traverse City, Michigan.  The encounters have increased in intensity and frequency over the past months and Dan has not been found as of this post.";
    myStory[1]="3/1/13 - The police showed up at my house this morning asking me about the last time I saw Dan.  I told them we had hung out a few years ago and played Mario Kart.  After some more basic questions I inquired as to why they are asking me about Dan.  The detectives told me Dan hasn't been home in a few days and they discovered his car at the abandoned Northern Michigan Asylum.  I am going to help with the search party tomorrow.";
    myStory[2]="3/2/13 - The search party failed to discover Dan, his body, or any evidence as to his location.  I had nothing planned for the night and decided to stay after and continue to search for my friend.  After spending hours searching the forest to no avail I decided to head home because the darkness was making it difficult to continue searching.  On the way back to my car, while passing the infamous Hippie Tree, I noticed something out of the corner of my eye.  It was a tall figure wearing a black suit and he appeared to have no hair.  I stopped and did a double take but nothing was there.  Odd.";
    myStory[3]="3/12/13 - Today the police had me come into the station and asked me about some...disturbing drawings they found in Dan’s room.  There were dozens of drawings, some contained an oval with a black “X” through it while there were many of a slim, tall figure in black with frightening sayings scribbled all over the page.  Seeing those drawings reminded me of that tall figure I saw in the woods.  I’m going to go back to the Asylum and check out that hippie tree in further detail.";
    myStory[4]="3/13/13 - I went back to the Asylum today around dusk.  There was no one around when I made it out to the Hippie Tree.  After looking around for some time, I walked further into the woods.  I heard a stick snap behind me and I instantly fixed the beam of my flashlight on its location.  What it shined on was the tall figure I saw before, the same one Dan drew many times before.";
    myStory[5]="5/27/13 - After my encounter with the Tall Man, I found myself slumped against the Hippie Tree, not remembering anything else from the night.  All I am able to remember is his face.  The Tall Man didn’t have one and instead had a white featureless head.  I avoided looking into forests for fear that he would be standing there waiting.  The fear, nervousness and paranoia grew over the past couple months and now my therapist suggests I face my fears, saying they’re only real to me.  I will return to the forest behind the Asylum tomorrow.";
    for(i=0;i<myStory.length;i++){
    	console.log(myStory[i]);}
    and my HTML code:
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <link href="../Desktop/game/style.css" rel="stylesheet" type="text/css">
    <script src="../Desktop/game/game.js"></script>
    </head>
    
    <body>
    <p id="story">This is my story...</p>
    <input name="NavButton" type="button" value="Next" Onclick="OnPress();">
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,002
    Thanks
    15
    Thanked 236 Times in 236 Posts
    Code:
    // JavaScript Document
    var i = 0;
    function OnPress ()
    {
    	document.getElementById("story").innerHTML = myStory[i];
    	i++;
    	if(i==myStory.length)
    	i=0;
    }
    
    var myStory=();
    myStory[0]="5/27/13 - The following journal entries serve as a record of my confrontations with the Tall Man.  This all started when my old friend Dan went missing in the forest behind the old Northern Michigan Asylum in Traverse City, Michigan.  The encounters have increased in intensity and frequency over the past months and Dan has not been found as of this post.";
    myStory[1]="3/1/13 - The police showed up at my house this morning asking me about the last time I saw Dan.  I told them we had hung out a few years ago and played Mario Kart.  After some more basic questions I inquired as to why they are asking me about Dan.  The detectives told me Dan hasn't been home in a few days and they discovered his car at the abandoned Northern Michigan Asylum.  I am going to help with the search party tomorrow.";
    myStory[2]="3/2/13 - The search party failed to discover Dan, his body, or any evidence as to his location.  I had nothing planned for the night and decided to stay after and continue to search for my friend.  After spending hours searching the forest to no avail I decided to head home because the darkness was making it difficult to continue searching.  On the way back to my car, while passing the infamous Hippie Tree, I noticed something out of the corner of my eye.  It was a tall figure wearing a black suit and he appeared to have no hair.  I stopped and did a double take but nothing was there.  Odd.";
    my
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    Spenny500 (06-03-2013)

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    Code:
    // JavaScript Document
    var i = 0;
    function OnPress ()
    {
    	document.getElementById("story").innerHTML = myStory[i];
    	i++;
    	if(i==myStory.length)
    	i=0;
    }
    
    var myStory=();
    myStory[0]="5/27/13 - The following journal entries serve as a record of my confrontations with the Tall Man.  This all started when my old friend Dan went missing in the forest behind the old Northern Michigan Asylum in Traverse City, Michigan.  The encounters have increased in intensity and frequency over the past months and Dan has not been found as of this post.";
    myStory[1]="3/1/13 - The police showed up at my house this morning asking me about the last time I saw Dan.  I told them we had hung out a few years ago and played Mario Kart.  After some more basic questions I inquired as to why they are asking me about Dan.  The detectives told me Dan hasn't been home in a few days and they discovered his car at the abandoned Northern Michigan Asylum.  I am going to help with the search party tomorrow.";
    myStory[2]="3/2/13 - The search party failed to discover Dan, his body, or any evidence as to his location.  I had nothing planned for the night and decided to stay after and continue to search for my friend.  After spending hours searching the forest to no avail I decided to head home because the darkness was making it difficult to continue searching.  On the way back to my car, while passing the infamous Hippie Tree, I noticed something out of the corner of my eye.  It was a tall figure wearing a black suit and he appeared to have no hair.  I stopped and did a double take but nothing was there.  Odd.";
    my
    Thank you so much for your help! Unfortunately your corrections lead to the error message "undefined" after the first button press. I'm not sure because I'm so new to JS, but I feel like I somehow messed up with the "for" loop at the end. Could that be causing the error message?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    I dunno what you did wrong, but it worked fine for me.

    Here's my version of the same thing. It's a bit neater to put the JS code *after* all the HTML except </body></html>. And it's more modern to establish the onclick for the button the way I am doing it.
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <p id="story">This is my story...</p>
    <input id="NavButton" type="button" value="Next"/>
    
    <script type="text/javascript">
    var myStory = [ ];
    myStory[0]="5/27/13 - The following journal entries serve as a record of my confrontations with the Tall Man.  This all started when my old friend Dan went missing in the forest behind the old Northern Michigan Asylum in Traverse City, Michigan.  The encounters have increased in intensity and frequency over the past months and Dan has not been found as of this post.";
    myStory[1]="3/1/13 - The police showed up at my house this morning asking me about the last time I saw Dan.  I told them we had hung out a 
    few years ago and played Mario Kart.  After some more basic questions I inquired as to why they are asking me about Dan.  The detectives told me Dan hasn't been home in a few days and they discovered his car at the abandoned Northern Michigan Asylum.  I am going to help with the search party tomorrow.";
    myStory[2]="3/2/13 - The search party failed to discover Dan, his body, or any evidence as to his location.  I had nothing planned for the night and decided to stay after and continue to search for my friend.  After spending hours searching the forest to no avail I decided to head home because the darkness was making it difficult to continue searching.  On the way back to my car, while passing the infamous Hippie Tree, I noticed something out of the corner of my eye.  It was a tall figure wearing a black suit and he appeared to have no hair.  I stopped and did a double take but nothing was there.  Odd.";
    myStory[3]="3/12/13 - Today the police had me come into the station and asked me about some...disturbing drawings they found in Dan’s room.  There were dozens of drawings, some contained an oval with a black “X” through it while there were many of a slim, tall figure in black with frightening sayings scribbled all over the page.  Seeing those drawings reminded me of that tall figure I saw in the woods.  I’m going to go back to the Asylum and check out that hippie tree in further detail.";
    myStory[4]="3/13/13 - I went back to the Asylum today around dusk.  There was no one around when I made it out to the Hippie Tree.  After looking around for some time, I walked further into the woods.  I heard a stick snap behind me and I instantly fixed the beam of my flashlight on its location.  What it shined on was the tall figure I saw before, the same one Dan drew many times before.";
    myStory[5]="5/27/13 - After my encounter with the Tall Man, I found myself slumped against the Hippie Tree, not remembering anything else from the night.  All I am able to remember is his face.  The Tall Man didn’t have one and instead had a white featureless head.  I avoided looking into forests for fear that he would be standing there waiting.  The fear, nervousness and paranoia grew over the past couple months and now my therapist suggests I face my fears, saying they’re only real to me.  I will return to the forest behind the Asylum tomorrow.";
    
    var currentChapter = 0;
    document.getElementById("NavButton").onclick = 
        function( ) 
        {
            document.getElementById("story").innerHTML =
                myStory[currentChapter];
            currentChapter = ( currentChapter + 1 ) % myStory.length;
        }
    </script>    
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Spenny500 (06-03-2013)

  • #5
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    I dunno what you did wrong, but it worked fine for me.

    Here's my version of the same thing. It's a bit neater to put the JS code *after* all the HTML except </body></html>. And it's more modern to establish the onclick for the button the way I am doing it.
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <p id="story">This is my story...</p>
    <input id="NavButton" type="button" value="Next"/>
    
    <script type="text/javascript">
    var myStory = [ ];
    myStory[0]="5/27/13 - The following journal entries serve as a record of my confrontations with the Tall Man.  This all started when my old friend Dan went missing in the forest behind the old Northern Michigan Asylum in Traverse City, Michigan.  The encounters have increased in intensity and frequency over the past months and Dan has not been found as of this post.";
    myStory[1]="3/1/13 - The police showed up at my house this morning asking me about the last time I saw Dan.  I told them we had hung out a 
    few years ago and played Mario Kart.  After some more basic questions I inquired as to why they are asking me about Dan.  The detectives told me Dan hasn't been home in a few days and they discovered his car at the abandoned Northern Michigan Asylum.  I am going to help with the search party tomorrow.";
    myStory[2]="3/2/13 - The search party failed to discover Dan, his body, or any evidence as to his location.  I had nothing planned for the night and decided to stay after and continue to search for my friend.  After spending hours searching the forest to no avail I decided to head home because the darkness was making it difficult to continue searching.  On the way back to my car, while passing the infamous Hippie Tree, I noticed something out of the corner of my eye.  It was a tall figure wearing a black suit and he appeared to have no hair.  I stopped and did a double take but nothing was there.  Odd.";
    myStory[3]="3/12/13 - Today the police had me come into the station and asked me about some...disturbing drawings they found in Dan’s room.  There were dozens of drawings, some contained an oval with a black “X” through it while there were many of a slim, tall figure in black with frightening sayings scribbled all over the page.  Seeing those drawings reminded me of that tall figure I saw in the woods.  I’m going to go back to the Asylum and check out that hippie tree in further detail.";
    myStory[4]="3/13/13 - I went back to the Asylum today around dusk.  There was no one around when I made it out to the Hippie Tree.  After looking around for some time, I walked further into the woods.  I heard a stick snap behind me and I instantly fixed the beam of my flashlight on its location.  What it shined on was the tall figure I saw before, the same one Dan drew many times before.";
    myStory[5]="5/27/13 - After my encounter with the Tall Man, I found myself slumped against the Hippie Tree, not remembering anything else from the night.  All I am able to remember is his face.  The Tall Man didn’t have one and instead had a white featureless head.  I avoided looking into forests for fear that he would be standing there waiting.  The fear, nervousness and paranoia grew over the past couple months and now my therapist suggests I face my fears, saying they’re only real to me.  I will return to the forest behind the Asylum tomorrow.";
    
    var currentChapter = 0;
    document.getElementById("NavButton").onclick = 
        function( ) 
        {
            document.getElementById("story").innerHTML =
                myStory[currentChapter];
            currentChapter = ( currentChapter + 1 ) % myStory.length;
        }
    </script>    
    </body>
    </html>
    After looking at it again the for loop was pointless and was the cause of the problem. Your way does look MUCH cleaner, thanks for help!


  •  

    Tags for this Thread

    Posting Permissions

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