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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2017
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question For loops in Javascript.

    Good morning/evening,


    I learned Javascript last week and I've been trying to mess with it but for some reason I'm understanding my for loops don't work or I can't seem to figure out my error.

    This is the content of my page:

    Code:
    <table>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
    </table>

    And this is my javscript:

    Code:
            var buttons = document.getElementsByTagName("button");
            var boxes = document.getElementsByTagName("input");
                   
                buttons[0].onclick = function() {
                boxes[0].value = "Boo!";  
    };
    This code works just like how you would expect it to. However when I try to use a for loop to make the code repeat it stops functioning.

    Code:
            var buttons = document.getElementsByTagName("button");
            var boxes = document.getElementsByTagName("input");
            
            for(i = 0; i > buttons.length; i++){   
                
                buttons[i].onclick = function() {
                boxes[i].value = "Boo!";  
                };   
            }
    Is there something really obvious that I'm missing on? Thanks for any help.

  2. #2
    Regular Coder
    Join Date
    Sep 2010
    Location
    U S of A
    Posts
    172
    Thanks
    2
    Thanked 33 Times in 33 Posts
    for(i = 0; i > buttons.length; i++){

    Code:
    <!DOCTYPE html>
    <html>
      <head>
    	<title>Boo</title>
        <meta charset="utf-8">	
      </head>
      <body>
        <table>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
    </table><script>
    var buttons = document.getElementsByTagName("button");
            var boxes = document.getElementsByTagName("input");
            
            for(var i = 0; i < buttons.length; i++){  
                
                buttons[i].onclick = (function() {
    		var el=boxes[i];
                	return function(){el.value = "Boo!"; } 
                })();   
            }
    </script>
      </body>
    </html>
    Last edited by Shaka Zorba; 01-10-2017 at 01:40 AM.

  3. #3
    New to the CF scene
    Join Date
    Jan 2017
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Shaka Zorba View Post
    for(i = 0; i > buttons.length; i++){
    I've tried swapping the > signs but it doesn't cut it.

    My browsers ( Chrome & Firefox ) give me the error:
    "TypeError: boxes[i] is undefined"

  4. #4
    Regular Coder
    Join Date
    Sep 2010
    Location
    U S of A
    Posts
    172
    Thanks
    2
    Thanked 33 Times in 33 Posts
    Code:
    <!DOCTYPE html>
    <html>
      <head>
    	<title>Boo</title>
        <meta charset="utf-8">	
      </head>
      <body>
        <table>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
        <td><input type="text"><button>Generate</button></td>
    </table><script>
    var buttons = document.getElementsByTagName("button");
            var boxes = document.getElementsByTagName("input");
            
            for(var i = 0; i < buttons.length; i++){  
                
                buttons[i].onclick = (function() {
    		var el=boxes[i];
                	return function(){el.value = "Boo!"; } 
                })();   
            }
    </script>
      </body>
    </html>
    the value of boxes[i] depends
    on the value of i
    after the loop is
    over the value of i
    is 6
    so we need a way to store
    the value at the time the
    function is assigned to onclick
    Last edited by Shaka Zorba; 01-10-2017 at 01:52 AM.

  5. Users who have thanked Shaka Zorba for this post:

    FrenchMajesty (01-10-2017)


 

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
  •