• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Changing an Array

Just as you can change the values in a variable after the Web page loads, you can change the values stored in an array or even add new values to them.

To make changes to an array:

Create your array (Code 3.4). You can either place the array directly in the HTML page or place it in an external JavaScript file and link to it.

Code 3.4. The external JavaScript array being used with Code 3.5.

var partyAttend = new Array();
partyAttend[0] = 'Tweedle Dee';
partyAttend[1] = 'Tweedle Dum';
partyAttend[2] = 'White Knight';
partyAttend[5] = 'Alice';
partyAttend[4] = 'Red Queen';

<script language="javascript"
→ type="text/javascript"
→ src="arrays.js"></script>

If you are importing your array from an external JavaScript file, add a link in your HTML code (Code 3.5).

Code 3.5. The external JavaScript file (Code 3.4) containing the array is linked to. As with Code 3.3, the function displayArray() is used to read and write the array. The function changeArray() is used to add or remove a value from the array.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>DHTML &amp; CSS Advanced | Working with Arrays | Sorting an Array</title>
        <script language="javascript" type="text/javascript" src="arrays.js">
        <script language="javascript" type="text/javascript">
           function changeArray(arrayName,areaName,newValue) {
								var arrayLength = arrayName.length;
								var valueReplaced = 0;
								for (var i = 0; i < arrayLength; i++) {
								if (arrayName[i] == newValue) {
								arrayName[i] = null;
								i = arrayLength +1;
								valueReplaced = 1;
								if (valueReplaced == 0) arrayName[arrayLength+1] = newValue;
								function displayArray(arrayName,areaName) {
								var object=document.getElementById(areaName);
								for (var i = 0; i < arrayName.length; i++) {
								if (arrayName [i] != null) {
								object.innerHTML += arrayName [i];
								if (i < (arrayName.length-1)) object.innerHTML += ', ';
  <body onload="displayArray(partyAttend,'partyList')">
     <h1>Party List</h1>
     <div id="partyList">
								<!-- Dynamically Filled --></div>
        <br />
        <a href="#" onclick="changeArray(partyAttend,'partyList','White Queen')">White Queen</a> |
         <a href="#" onclick="changeArray(partyAttend,'partyList','Red Knight')">Red Knight</a> |
         <a href="#" onclick="changeArray(partyAttend,'partyList','Humpty Dumpty')">Humpty Dumpty</a>


function changeArray(arrayName,
→ areaName,newValue) {...}

Add the function changeArray() to your page. This script compares the value being added to the values already in the array and removes it if it already exists or adds it to the end of the array if it does not. Finally, this function triggers the function displayArray() in order to display the newly adjusted array.

function displayArray(arrayName,
→ areaName) {...}

Add the function displayArray() to your page. This function writes all of the elements in the specific array (arrayName) into the specific object on the page (areaName). Although you don’t have to use this function in order to access an array’s values, it is a convenient way to display an array.

→ 'partyList')"

Add an event handler to trigger the displayArray() function created in step 3 to display the values initially in the array. In this example, we are using an onload event handler to write the array partyAttend into the area designated by the ID partyList.

<div id="partyList">...</div>

Add an object with an ID to define the area into which the array specified in step 4 will be written.

<a href="#" onclick="changeArray
→ (partyAttend,'partyList','White
→ Queen')">White Queen</a>

Add an event handler to trigger the function changeArray() feeding it the name of the array you want to change, the area in which you want the revised array displayed, and the information you want to add to the array.

In this example, I’m using an onclick event handler to add the White Queen to the array partyAttend and display the array in the area identified as partyList (Figures 3.3, 3.4).

Figure 3.3. The original party list with options underneath to add new guests.

Figure 3.4. After one of the alternate party guests is selected, they are added to the list.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint