Tuesday, 13 June 2017

javascript add, delete, modify html component

DOM Examples
  • This is item 1
  • This is item 2
  • This is item 3






<!DOCTYPE html>
<html>
<head>
<title>DOM Examples</title>
<meta name="author" content="aschmidt" >
<meta name="date" content="2017-06-06T08:00:36-0700" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="docstyles.css">
<script type="text/javascript" src="domexample.js"></script>
</head>
<body>

<ul id="itemlist">

<li id="item1">This is item 1</li>
<li id="item2" >This is item 2</li>
<li id="item3">This is item 3</li>

</ul>

<input type="button" value="Add to List" id="addtolist">
<br>
<input type="button" value="Delete from List" id="deletefromlist">
<br>
<label>Enter an item number that you wish to change</label><input type="number" id="indexvalue" size="4" min="1">
<input type="button" value="Amend Item" id="amendlist">
<br>


</body>
</html>

----------------------------------------

//domexample.js

window.onload=initFunction;

//creates the addEventListeners

function initFunction() {
document.getElementById("addtolist").addEventListener("click",addtolist,false);
document.getElementById("deletefromlist").addEventListener("click",deletefromlist,false);
document.getElementById("amendlist").addEventListener("click",amendlist,false);
}

//adds an li element to the ul
function addtolist() {
//set reference to ul id value. this is the parent of the unordered list. li elements are the childnodes
var ul=document.getElementById("itemlist");
//get number of list elements
//adding new values to the end of the list
var listelements=ul.getElementsByTagName("li");
//need number of list elements
var listsize=listelements.length;
//parse
listsize=parseInt(listsize);
//increment by 1
listsize++;
//create element
var li=document.createElement("li");
//set id value as attribute. Concatenation of 'item' + listsize
li.setAttribute("id","item"+listsize);
li.appendChild(document.createTextNode("This is item "+listsize));
//add li object to ul object
ul.appendChild(li);
}

//deletes last item from the list
function deletefromlist() {
//set reference to ul
var ul=document.getElementById("itemlist");
var item="item";//string value to reference specific id="item   "
var listelements=ul.getElementsByTagName("li");
var lastitem=listelements.length;
//create item value
item+=lastitem;
//create reference to specific element that contains the id of the last element
var elem=document.getElementById(item);//e.g. will be item4
//call on parentNode to delete item. This is the safest way to do this
elem.parentNode.removeChild(elem);
}

//changes the content of a specific list element
function amendlist() {
//get index number of item to change
var indexnumber=document.getElementById("indexvalue").value;
//parse to int
indexnumber=parseInt(indexnumber);
//NOTE We should range check to make sure the indexnumber is not greater than the
//number of list elements
//create item string
var item="item";
item+=indexnumber;//specific id of what we want to change
//change text
document.getElementById(item).innerHTML="This list element has been changed";
}

No comments:

Post a Comment