www.webdeveloper.com
Results 1 to 7 of 7

Thread: Need help making a Javascript array assignment.

  1. #1
    Join Date
    Nov 2012
    Posts
    5

    Need help making a Javascript array assignment.

    Our class needs to make a JavaScript array for an ordered list, i.e. 1: hot dogs 2: chicken 3: burgers, etc. There needs to be an add and delete button that will add on to the list and delete from the list. If the user enters something to delete that's not in the list they will be prompted that the item is not in the list.

    There also needs to be a box that says "Char count" that displays the amount of characters in the string of list currently being shown to the user.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389
    So what has you class come up with thus far?

  3. #3
    Join Date
    Nov 2012
    Posts
    5
    This is my current code for the assignment:

    http://pastebin.com/iFadYXax

  4. #4
    Join Date
    Nov 2012
    Posts
    5
    And also, this is the powerpoint that describes the assignment:

    http://www.2shared.com/document/fPLwcCpa/Hw6.html

  5. #5
    Join Date
    Nov 2012
    Posts
    5
    bump

  6. #6
    Join Date
    Oct 2012
    Posts
    9
    Don't use appendChild for each list item.
    Actually, don't do separate spans for each list item.

    Instead, keep each item in a javascript array (forget about displaying it first, with the spans and everything, just have a single div for the entire list).

    Then for each add/delete, just add/delete the item from the js array (after validating it).

    THEN, after each add/delete, regenerate the entire list as a single string from the array (this will handle renumbering), count the characters in the newly generated string, and slap that into a div dedicated for the entire list.

    That handles all the requirement in one go, and will not be overly complicated with many appendchilds/removechilds, just a single innerHTML assignment for everything.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389

    Lightbulb

    Here is what 'bundat' was trying to explain.
    Make sure you can EXPLAIN each line in the code or the instructor will question your work originality.
    Note: Prompt() is not the best way to do this, but I left it in because it is what you used.
    Code:
    <html>
    <head>
    
    <title>Document Object</title>
    
    <style type="text/css">
    div.topbox {
      width:1220px;
      padding:10px;
      border:5px solid gray;
      margin:0px;
      background-color: #e1e1e1;
      font-size: 20px
    }
    div.bottombox{
      width:200px;
      padding:10px;
      border:5px solid gray;
      margin:0px;
      background-color: #0000ee;
      font-size: 20px;
    }
    .placeholder {
      background-color: #ccff33;
      font-size: 22px
    }
    </style>
    
    </head>
    <body>
    
    <div class="topbox">
     Here is my (Tom Rabovsky)list:
     <span class="placeholder" id="placeholder">
    
     </span>
    </div>
    <br />
    	
    Click button to start
    <input type="button" id="addOption" value="Add a new element">
    <input type="button" id="delOption" value="Delete an element">
    <br />
    	
    <div id="bottombox" class="bottombox"> Total Chars:  </div>
    
    <script>
    var TomsList = ['Chicken','Hotdogs','Steak','Hamburgers'];
    function showTomsList() {
      var count = 0;  for (var i=0; i<TomsList.length; i++) { count += TomsList[i].length; }
      document.getElementById('bottombox').innerHTML = 'Total Chars: '+count;
    
      var tstr = TomsList.join(' ');
      document.getElementById('placeholder').innerHTML = tstr;
    }
    window.onload = function() {
      showTomsList(); 
      document.getElementById('addOption').onclick = function() {
        var resp = prompt("What would you like to add? (Click cancel to abort)");
        if (resp) { TomsList.push(resp); }
        showTomsList(); 
      }
      document.getElementById('delOption').onclick = function() {
        tarr = [];
        var resp = prompt("What would you like to delete? (Click cancel to abort)");
        for (var i=0; i<TomsList.length; i++) {
          if (TomsList[i].toUpperCase() != resp.toUpperCase()) { tarr.push(TomsList[i]); }
        }
        TomsList = [].concat(tarr);
        showTomsList(); 
      }
    };
    </script>
    	
    </body>
    </html>

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