SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question array data population

    Hi,

    Im a javascript noob, And im trying to get this array data to appear in my textarea on the click of a button.

    <html>
    <head>
    <h2><u>Add Element to Array</u></h2>
    <script>
    var array = new Array();
    array[0] = "456";
    array[1] = "567";
    array[2] = "12";
    array[3] = "4564";
    array[4] = "986";
    document.write("<b>The Array is/b> <br>");

    for (i=0;i<array.length;i++)
    {
    document.write(array[i] + "<br />");
    }
    function mywrite()
    {
    form.txt1.focus();
    form.txt1.value = document.write(array[i] + "<br />");
    }
    </script>
    </head>
    <body bgcolor="violet">
    <form name="it">
    <input type="text" id="input" value=""></input><br />
    <textarea id="txt1" name="txt1" rows="4"></textarea><br />
    <input type="button" value="Add to list" onClick="mywrite()"></input></br>
    </form>
    <p>&nbsp;</p>
    </html>


    any help would be appreciatted ive been tearing my hair out for over a week

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by minusten View Post
    any help would be appreciatted ive been tearing my hair out for over a week
    Input elements are empty elements - there is no closing tag for them.
    Get rid of that inline event attribute. They clutter up the HTML and they don't automatically pass an element reference to the script.
    And, give the button an identifier so that you can easily target it from the script.

    Code html4strict:
    <input type="button" id="addtolist" value="Add to list"></br>

    Put scripts at the bottom, just before the </body> tag. That allows parallel loading of scripts which speeds up the loading of the page, and your script can also easily work with elements on the page.

    Code html4strict:
    <body>
    ...
    <script src="script.js"></script>
    </body>

    Get a reference to the add button, and attach your mywrite function to the onclick event.

    Code javascript:
    function mywrite() {
        ...
    }
    document.getElementById('addtolist').onclick = mywrite;

    The mywrite function needs to easily access the form, so give the form a unique identifier. Names should be restricted only to submitted form fields. Putting a name on the form tag itself is not a good idea. You need a unique identifier for the form so that you can access it, so use the right tool for the job.

    "it" is not a useful name for the form either, because it doesn't provide much in the way of useful information. "login" and "contactdetails" and "subscription" are good terms to use on their appropriate forms, so what would be good to use on this form? "arraytarget" seems to be a better choice in this case than "it"

    I've also removed the id attributes from the input and textarea fields because where practical, unique identifiers should be kept to a minimum.
    They are using name instead, which is what form fields should instead use. Any form elements that are identified with name are easily accessible via the form.elements collection.

    Code html4strict:
    <form id="arraytarget">
        <input type="text" name="input" value=""><br />
        <textarea name="txt1" rows="4"></textarea><br />
        <input id="addtolist" type="button" value="Add to list"></br>
    </form>

    Now you can easily access the form via the this keyword, and work with its fields.

    Code javascript:
    function mywrite() {
        var form = this.form;
        form.elements.input.focus();
        form.elements.txt1.value = array;
    }

    The page content that's currently up in the head is highly illegal. Move it down to the body instead, and you can also get rid of those horribly procedural document.write methods.

    Now we can run the code through jslint.com so that we can tidy up any other major issues, make some tweaks. Fiddle with this and retune that, plus adding in some extra polish gives us this:

    Code html4strict:
    <html>
    <head>
    <style type="text/css">
    body { background-color: violet; }
    h2 { text-decoration: underline; }
    form p { margin: 0; }
    </style>
    </head>
    <body>
    <h2>Add Element to Array</h2>
    <form id="arraytarget">
        <p><input type="text" name="input"></p>
        <p><textarea name="txt1" rows="4"></textarea></p>
        <p><input id="addtolist" type="button" value="Add to list"></p>
    </form>
    <script type="text/javascript">
    (function () {
        function showHTMLBeforeForm(html, form) {
            var span = document.createElement('span');
            span.innerHTML = html;
            document.body.insertBefore(span, form);
        }
        function mywrite() {
            var form = this.form;
            form.elements.input.focus();
            form.elements.txt1.value = form.array;
        }
     
        var array = [456, 567, 12, 4564, 986],
            html = '<b>The Array is:</b> <br>' + array.join('<br>'),
            form = document.getElementById('arraytarget');
     
        showHTMLBeforeForm(html, form);
     
        form.array = array;
        document.getElementById('addtolist').onclick = mywrite;
    }());
    </script>
    </html>

    It's a bit more than what was asked for, so enjoy.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much

    "Put scripts at the bottom, just before the </body> tag. That allows parallel loading of scripts which speeds up the loading of the page, and your script can also easily work with elements on the page".

    Very usefull link

    thanks again


Tags for this Thread

Bookmarks

Posting Permissions

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