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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.



    This is my current code for the assignment:

    http://pastebin.com/iFadYXax

    And also, this is the powerpoint that describes the assignment:

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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    This is *NOT* an "ordered list":
    <span>chicken</span><span>HotDogs</span><span>Steak</span><span>Hamburgers</span></span>

    An ordered list uses the <ol> tag and then <li> element tags.
    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.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    As a general rule, the people helping out in this forum don't write code for others (especially code that appears to be for homework), but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.

    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.

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    As a general rule, the people helping out in this forum don't write code for others (especially code that appears to be for homework), but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.
    I have made an effort and I have written code that I posted. Are you not able to read?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Actually, Philip, he's done a fairly decent amount of work, already. Including some "unobtrusive" JavaScript.

    Example (from his link):
    Code:
               document.getElementById("addOption").onclick = function() {
                        var newOption = prompt("What would you like to add? (Click cancel to abort)");
                        options.push(newOption);
                        var newOptionElement = document.createElement("span");
                        var newOptionElementText = document.createTextNode(newOption);
                        newOptionElement.appendChild(newOptionElementText);
                        document.getElementById("placeholder").appendChild(newOptionElement);
                };
    Kind of impressive, to tell the truth. But wrongheaded in that it doesn't qualify as an "ordered list".
    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.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,462
    Thanks
    0
    Thanked 633 Times in 623 Posts
    Quote Originally Posted by Old Pedant View Post
    Actually, Philip, he's done a fairly decent amount of work, already. Including some "unobtrusive" JavaScript.
    A lot of people will not have seen any of the code because he posted a link to his page (which a lot of people wouldn't risk clicking on because it could potentially be a link to a virus instead) instead of posting the code directly.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Ehhh...I'm either foolish or I trust my anti-virus program. Since I installed Microsoft Security Essentials (a free download) about 2 years ago, I have never gotten a virus and I've only had on minor malware. A better track record than I ever had with Norton, CA, or Kapersky, which I had used in the 12 years previously.
    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.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by felgall View Post
    A lot of people will not have seen any of the code because he posted a link to his page (which a lot of people wouldn't risk clicking on because it could potentially be a link to a virus instead) instead of posting the code directly.
    Yes, that is why I did not view his code. Just because I am paranoid that does not prove that it is not malware.

    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.

  • #9
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For people afraid of external links, here is my code. Still having trouble adding numbers and colons before each item in my list. I'm also not sure how to have the character box inform the user how many characters there currently are in the string.



    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>chicken</span><span>HotDogs</span><span>Steak</span><span>Hamburgers</span></span>
                           
        </div>
               
        <br />
               
        Click button to start
               
        <input type="button" id="addOption" value="Add a new element">
        <input type="button" id="deleteOption" value="Delete an element">
               
        <br />
               
        <div class="bottombox">
               
        Total Chars:
               
        </div>
         
        <script>
                window.onload = function() {
                   
                    var arrayOfTags = document.getElementById("placeholder").getElementsByTagName("span");
                   
                    options = [];
                    for (var i = 0; i <= arrayOfTags.length - 1; i++) {
                            options.push(arrayOfTags[i].childNodes[0].nodeValue);
                    };
                   
                    document.getElementById("addOption").onclick = function() {
                            var newOption = prompt("What would you like to add? (Click cancel to abort)");
                            options.push(newOption);
                            var newOptionElement = document.createElement("span");
                            var newOptionElementText = document.createTextNode(newOption);
                            newOptionElement.appendChild(newOptionElementText);
                            document.getElementById("placeholder").appendChild(newOptionElement);
                    };
                    document.getElementById("deleteOption").onclick = function() {
                            var deleteOption = prompt("What would you like to delete? (Click cancel to abort)");
                            var exists = false;
                            for (var i = 0; i <= options.length - 1; i++) {
                                    if (deleteOption === options[i]) {
                                            document.getElementById("placeholder").removeChild(document.getElementById("placeholder").getElementsByTagName("span")[i]);
                                            options.splice(i, 1);
                                            i = options.length - 1;
                                            exists = true;
                                    };
                            };
                            if (exists === false) {
                                    alert("This item does not exist. Please re-enter.");
                            };
                    };
            };
        </script>
               
        </body></html>

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Aside from the fact that you are NOT using an ordered list, and so as a result the page looks as ugly a pig snot, what is your problem/question?

    It seemed to me to work as you wanted it to.
    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.


  •  

    Posting Permissions

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