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> </p>
</html>
:goof:

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

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.


<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.


<body>
...
<script src="script.js"></script>
</body>

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


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.


<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.


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:


<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.

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 :smiley:

thanks again