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 14 of 14
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Button for incremental array?

    Hi there
    I am still new to JavaScript and am trying to work out a small script that functions as flashcards to learn Japanese vocab. The code below shows pretty much what I want to do, however I wish to make the "next" button repeat the script for the next pair of words in the 2 arrays (ie Japanese and it's meaning in English. Any assistance would be greatly appreciated.

    [CODE]
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Japanese Vocab</title>

    </head>
    <body>

    <h1>Japanese Vocab</h1>
    <p id="japanese"></p>
    <p id="english">&nbsp;</p>

    <button onclick="showEnglish()">Answer</button>
    <button onclick="nextWord()">Next word</button>

    <script type="text/javascript">
    var japanese=new Array("食べる","読む","行く");
    var english=new Array("to eat","to read","to go");
    document.getElementById("japanese").innerHTML=japanese[0];

    function showEnglish()
    {
    document.getElementById("english").innerHTML=english[0];
    }

    </script>

    </body>
    </html>
    [CODE]

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Japanese Vocab</title>
    
    </head>
    <body>
    
    <h1>Japanese Vocab</h1>
    <p id="japanese"></p>
    <p id="english">&nbsp;</p>
    
    <button onclick="showEnglish()">Answer</button>
    <button onclick="nextWord()">Next word</button>
    
    <script type="text/javascript">
    var japanese=new Array("1","2","3");
    var english=new Array("to eat","to read","to go");
    var cnt=0;
    
    document.getElementById("japanese").innerHTML=japanese[cnt];
    
    function showEnglish(){
     document.getElementById("english").innerHTML=english[cnt];
    }
    
    function nextWord(){
     cnt=++cnt%japanese.length;
     document.getElementById("japanese").innerHTML=japanese[cnt];
     document.getElementById("english").innerHTML='';
    }
    
    </script>
    
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    meridian (06-28-2012)

  • #3
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,342
    Thanks
    13
    Thanked 349 Times in 345 Posts
    of course it somewhat depends on how modern it may be. e.g. Mozilla supports Iterators, which is (from the sound of it) best suited. however, it can also be done in plain old JS.
    PHP Code:
    // only tested in FF
    var it Iterator([
        {
    jp"食べる"en"eat"},
        {
    jp"読む"en"read"},
        {
    jp"行く"en"walk"},
    ]);

    var 
    loop = function()
    {
        try {
            var 
    obj it.next()[1];
            
    this.textContent obj.en " => " obj.jp;
        }
        catch (
    e) {
            
    alert("end of iteration");
        }
    }
    // attached to a button
    document.getElementById("test").addEventListener("click"looptrue); 
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    meridian (06-28-2012)

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thanks heaps vwphillips & Dormilich for such a quick response
    That really helps. The counter variable was exactly what I was looking for.
    The iterators solution was a bit over my head but certainly gives me something to start working on. The Mozilla link was also quite helpful.
    Cheers. Much appreciated

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Actually I tried using the same principle on a previous word button but I seem to get an undefined error. I guess I'm still missing something.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Japanese Vocab</title>
    
    </head>
    <body>
    
    <h1>Japanese Vocab</h1>
    <p id="japanese"></p>
    <p id="english">&nbsp;</p>
    
    <button onclick="prevWord()">Previous word</button>
    <button onclick="showEnglish()">Answer</button>
    <button onclick="nextWord()">Next word</button>
    
    <script type="text/javascript">
    var japanese=new Array("食べる","読む","行く");
    var english=new Array("to eat","to read","to go");
    var cnt=0;
    
    document.getElementById("japanese").innerHTML=japanese[cnt];
    
    function showEnglish()
    {
     document.getElementById("english").innerHTML=english[cnt];
     
    }
    
    function nextWord()
    {
     cnt=++cnt%japanese.length;
     document.getElementById("japanese").innerHTML=japanese[cnt];
     document.getElementById("english").innerHTML='&nbsp;';
    }
    function prevWord()
    {
     cnt=--cnt%japanese.length;
     document.getElementById("japanese").innerHTML=japanese[cnt];
     document.getElementById("english").innerHTML='&nbsp;';
    }
    </script>
    
    </body>
    </html>

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    This doesn't work:
    Code:
    cnt=--cnt%japanese.length;
    The % (modulo) operator works with negative values, but the values *ARE* still negative. So of course they are out of range of the array elements.

    Easy fix:
    Code:
    cnt = ( cnt + japanese.length - 1 ) % japanese.length;
    But there's an even easier way:
    Code:
    <button onclick="nextWord(1)">Previous word</button>
    <button onclick="showEnglish()">Answer</button>
    <button onclick="nextWord(-1)">Next word</button>
    
    <script type="text/javascript">
    var japanese=new Array("食べる","読む","行く");
    var english=new Array("to eat","to read","to go");
    var cnt=0;
    
    function showEnglish()
    {
        document.getElementById("english").innerHTML=english[cnt];
    }
    function nextWord( moveBy )
    {
        cnt = ( cnt + japanese.length + moveBy ) % japanese.length;
        document.getElementById("japanese").innerHTML=japanese[cnt];
        document.getElementById("english").innerHTML='&nbsp;';
    }
    nextWord(0); // get it started
    </script>
    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:

    meridian (06-28-2012)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    But you know, it would be better to keep the words paired, rather than depending on parallel arrays that could easily get out of sync. So:
    Code:
    <button onclick="nextWord(1)">Previous word</button>
    <button onclick="showEnglish()">Answer</button>
    <button onclick="nextWord(-1)">Next word</button>
    
    <script type="text/javascript">
    var words = [
        ["食べる",  "to eat"],
        ["読む",    "to read"],
        ["行く",     "to go"]
    ];
    var wordCount = words.length;
    var cnt=0;
    
    function showEnglish()
    {
        document.getElementById("english").innerHTML = words[cnt][1];
    }
    function nextWord( moveBy )
    {
        cnt = ( cnt + wordCount + moveBy ) % wordCount;
        document.getElementById("japanese").innerHTML = words[cnt][0]
        document.getElementById("english").innerHTML='&nbsp;';
    }
    nextWord(0); // get it started
    </script>
    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:

    meridian (06-28-2012)

  • #8
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thanks Old Pedant for your advice. I can see your point about keeping the pairs together. This is probably a good idea since I could potentially be putting hundreds of words into the script and that way would make it easier to deal with.
    I am really glad to have discovered this forum. I was just trying to learn this stuff solo but kept getting stuck. Thanks for your help guys.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    I had the previous and next buttons backwards, as I'm sure you discovered.

    It should be
    Code:
    <button onclick="nextWord(-1)">Previous word</button>
    <button onclick="showEnglish()">Answer</button>
    <button onclick="nextWord(1)">Next word</button>
    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:

    meridian (06-29-2012)

  • #10
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Ahh. I was wondering why it was behaving a bit odd there.
    Last night I was studying your counter and trying to understand how it was working. I'm still trying to understand how the first click of the previous word button gets the ctn value of 2. I can see how the rest is calculated (see comments in code below). I also added some lines to display the values with each click. Just to clarify, "moveBy" is just an arbitrary variable isn't it and not a method

    Thanks for your help

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Japanese Vocab</title>
    </head>
    
    <body>
    
    <h1>Japanese Vocab</h1>
    <p id="japanese"></p>
    <p id="english">&nbsp;</p>
    
    <button onclick="nextWord(-1)">Previous word</button>
    <button onclick="showEnglish()">Answer</button>
    <button onclick="nextWord(1)">Next word</button>
    
    <p id="counter">&nbsp;</p>
    <p id="wordCount">&nbsp;</p>
    <p id="moveBy">&nbsp;</p>
    
    
    
    <script type="text/javascript">
    var words = 
    [
        ["食べる",  "to eat"], // 0
        ["読む",    "to read"], // 1
        ["行く",     "to go"], // 2
    	
    ];
    var wordCount = words.length; 
    var cnt=0;
    
    function showEnglish()
    {
        document.getElementById("english").innerHTML = words[cnt][1]; 
    }
    function nextWord( moveBy ) 
        cnt = ( cnt + wordCount + moveBy ) % wordCount; 
    /* Next word
       0   time cnt = (0 + 3 +  0) =3      /3 = 0 remainder 
       1st time cnt = (0 + 3 +  1) =4      /3 = 1 remainder 
       2nd time cnt = (1 + 3 +  1) =5       /3 = 2 remainder 
       Previous word
       1st time cnt = (0 + 3 + -1) =2???? /3 = 2 remainder 
       2nd time cnt = (2 + 3 + -1) =4       /3 = 1 remainder 
       3nd time cnt = (1 + 3 + -1) =3       /3 = 0 remainder 
       
    */
        document.getElementById("japanese").innerHTML = words[cnt][0] 
        document.getElementById("english").innerHTML='&nbsp;';
    	
    	document.getElementById("counter").innerHTML="counter = "+ cnt;
    	document.getElementById("wordCount").innerHTML="wordCount = " + wordCount;
    	document.getElementById("moveBy").innerHTML="moveBy = " + moveBy;
    		
    }
    nextWord(0); // gets it started
    
    </script>
    </body>
    </html>

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Yes on all counts.

    And you correctly showed why adding the wordCount fixes any problems with going backwards. It causes you to "wrap around" from 0 to the last element. It's not needed when going forward, of course, but it doesn't hurt at all. So by having it there the code works for both directions.
    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:

    meridian (06-29-2012)

  • #12
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thanks Old Pedant. Forgive my ignorance but I still am trying to understand how the calculation works for the previous button. When the page loads cnt = 0, when previous is clicked ctn=2.
    The inputs for this I believe are: (0 + 3 + -1) % 3.
    Math is not my strong point but these inputs don't seem to equal 2. May I ask how this calculation is performed or are these inputs wrong. Sorry.

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by meridian View Post
    Thanks Old Pedant. Forgive my ignorance but I still am trying to understand how the calculation works for the previous button. When the page loads cnt = 0, when previous is clicked ctn=2.
    The inputs for this I believe are: (0 + 3 + -1) % 3.
    Math is not my strong point but these inputs don't seem to equal 2. May I ask how this calculation is performed or are these inputs wrong. Sorry.
    0 + 3 + - 1 = 2

    2 modulo 3 = 2. i.e the remainder when 2 is divided by 3, which is 0 times with 2 over. OK?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    meridian (06-29-2012)

  • #14
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Ok. I see now. I think I was thrown out by the fact that the second number was larger than the first (and couldn't be divided into it). That makes sense now. Thanks for spending the time to explain it.


  •  

    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
    •