I want display items of an array. At the click of button I need to perform following actions:
- Add an element at the beginning, end or middle of the displayed array
- Sort the array
- Remove duplicates from array
I managed to display the items of the array, and add new items, one by one with my Add in the Front button. But the string values won't show, all I can see are the index numbers 1., 2., 3., ect.
I tried putting the id="firsttree" in the <input type="text"> html tag, but the array would disappear when I load it on the web page.
JS
var originalArray = ['spruce', 'pine', 'cedar', 'maple', 'oak', 'birch', 'aspen'];
// Iterate array and display
originalArray.forEach(element => {
// Creates an Element Node with the specified name.
let listItem = document.createElement("li");
// creates a Text Node with the specified text.
let itemDescription = document.createTextNode(element);
// append: Add Item or Element
listItem.appendChild(itemDescription);
/*document.getElementById("firsttree").innerHTML = originalArray;*/
// Returns the element that has the ID attribute with the specified value and adds a node to the end of the list of children of the specified parent node
document.getElementById("firsttree").appendChild(listItem);
});
/**
* Add Items to list
*/
function addItem() {
// Unshift: Add item to beginning of list
originalArray.unshift(document.getElementById('firsttree').value);
// Making the text box empty and re-display
document.getElementById('firsttree').value = "";
disp(); // displaying the array elements
}
/**
* Render array
*/
function disp() {
var str="";
str = originalArray.length + '<br> '; // break the lines to form list.
// Increment the list by 1, i++ if i is less than length
for (i=1; i < originalArray.length; i++) // Initial parameter is 1.
{
// Adding each element with key number to display string
str += i + ". "+ originalArray[i] + "<br> ";
}
// Display the elements of the array
document.getElementById('firsttree').innerHTML=str;
}
HMTL
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="activity3.css">
<!-- ol: Ordered numbered list-->
<!--<script>
/*var trees = ['spruce', 'pine', 'cedar', 'maple', 'oak', 'birch', 'aspen'];*/AbortSignal
/*document.getElementById("oringinalTree").innerHTML = trees;*/
</script>-->
</head>
<body>
<h1>Array Methods</h1>
<br>
<label>
Enter new array element here
</label>
<input type="text">
<button type="button" value="Add" onclick="addItem()">
Add in the Front
</button>
<button type="text">
Add at the End
</button>
<button type="text">
Add in the Middle
</button>
<button type="text">
Sort
</button>
<button type="text">
Remove Duplicates
</button>
<br>
</form>
<h2>List of Trees</h2>
<h3>Tree Display:</h3>
<!-- Must create div to place list under Header-->
<div class="originalArray">
<ol id="firsttree"></ol>
<!--<link rel="stylesheet" type="text/css" href="path/to/your.css" />-->
<script src="gla3.js"></script>
</div>
<h4>Sorted Tree Display:</h4>
</body>
</html>
css
h3 {
position: absolute;
left: 70px;
top: 200px;
}
h4 {
position: absolute;
left: 300px;
top: 200px;
}
.originalArray {
position: absolute;
top: 250px;
left: 50px;
}
I need to add the string from input to the array and then be displayed, but instead I start off with undefined being added to array and the rest are all blank. Plus I don't want the number of increments (12) to be seen either.