www.webdeveloper.com
Results 1 to 5 of 5

Thread: Using Substrings to write to a Table or Grid

  1. #1
    Join Date
    Oct 2011
    Posts
    4

    Using Substrings to write to a Table or Grid

    Hi all, I'm working on a fairly simple script. Basically all I'm trying to do is use substrings to write one random letter of the alphabet into a 2x4 or 4x2 grid or table.

    I want to keep the code I have, as I'll need to do more with it later. Again, all I get 8 defined boxes each with one letter in each. I don't want to have any of the existing code changed, so if someone could help me out by adding to what is there, I'd really appreciate it!


    Code:
    <html>
    <head>
    	<script type="text/javascript">
    	var pairs;
    	function setupGame() {
    		pairs = new Array();
    		var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    		
    		for (var x = 1; x<= 8; x++) {
    		var letterIndex = Math.floor(Math.random() * 26);
    		var letter = alphabet.substr(letterIndex, 1);
    		pairs.push(letter);
    		//pairs.push(letter);
    
    		}
    
    		var gameboard = document.getElementById('board');
    		var output = "";
    		for (var i = 0; i < pairs.length; i++) {
    			output += pairs[i];
    			output += "<br>";
    		}
    		gameboard.innerHTML = output;
    	}
    	</script>
    </head>
    
    <body onLoad="setupGame();">
    
    <h1>Letters</h1>
    
    
    </body>
    </html>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410

    Lightbulb

    You forgot to add the 'board' to the display...
    Code:
    <h1>Letters</h1>
    <div id="board"></div>
    Remember to check the error console.

  3. #3
    Join Date
    Oct 2011
    Posts
    4
    Quote Originally Posted by JMRKER View Post
    You forgot to add the 'board' to the display...
    Code:
    <h1>Letters</h1>
    <div id="board"></div>
    Remember to check the error console.
    Thanks, I don't know why I had deleted that line.

    With that line inserted does anyone know how to have the 8 letters display in their own block inside a table?

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410

    Question Still unclear of desired results...

    Like this?
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var pairs = [];
    function setupGame() {
      var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      for (var x = 1; x<= 8; x++) {
        pairs.push(alphabet.substr(Math.floor(Math.random() * alphabet.length), 1));
      }
      document.getElementById('board').innerHTML
        = '<table border="1"><tr><td>'+pairs.join('</td></tr><tr><td>')+'</td></tr></table>';
    }
    </script>
    </head>
    <body onLoad="setupGame();">
    <h1>Letters</h1>
    <div id="board"></div>
    </body>
    </html>

  5. #5
    Join Date
    Oct 2011
    Posts
    4
    Yes JMRKER that's a step in the right direction, thanks!

    The next step I need some help with is getting this piece of code:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var pairs = [];
    function setupGame() {
      var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      for (var x = 1; x<= 8; x++) {
        pairs.push(alphabet.substr(Math.floor(Math.random() * alphabet.length), 1));
    
      }
      document.getElementById('board').innerHTML
        = '<table border="1"><tr><tr><td>'+pairs.join('</td></tr><tr><td>')+'</td></tr></tr><tr><tr><td>'+pairs.join('</td></tr><tr><td>')+'</td></tr></tr></table>';
    }
    </script>
    </head>
    <body onLoad="setupGame();">
    <h1>Letters</h1>
    <div id="board"></div>
    </body>
    </html>
    It's the same as the code JMRKER posted but with the stuff inside the <table> tag repeated. It displays 8 random letters twice each, and all I want to do now is get these 16 existing boxes to display as a 4x4 table instead of a single column one. Anyone know how to do this.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles