Download this tutorialStep 1: HTML elements
Create a new page and add the code in step 1 and step 2
Page elements' structure is very simple. We have a select element with some option :
<select id="listItems">
<option value="USB Pen Drive">Usb Pen Drive</option>
<option value="MacBook">MacBook</option>
<option value="iPhod">iPhod</option>
<option value="Microsoft Zune">Microsoft Zune</option> </select>
<input type="button" name="add" value="add element" onClick="javascript:addElement()">
<h3>My Shopping Chart <small><span id="totalItem">0</span> elements</small></h3>
<!-- Display a message when you add or remove an item-->
<div id="msg"></div>
<!-- Items will be added here -->
<div id="myElements">|
</div>
<option value="USB Pen Drive">Usb Pen Drive</option>
<option value="MacBook">MacBook</option>
<option value="iPhod">iPhod</option>
<option value="Microsoft Zune">Microsoft Zune</option> </select>
<input type="button" name="add" value="add element" onClick="javascript:addElement()">
<h3>My Shopping Chart <small><span id="totalItem">0</span> elements</small></h3>
<!-- Display a message when you add or remove an item-->
<div id="msg"></div>
<!-- Items will be added here -->
<div id="myElements">|
</div>
You can also add this simple CSS code inside <head> tag:
<style>
body{font-family:'Lucida Grande', Verdana, sans-serif; font-size:14px; color:#666666;}
a:link, a:visited{color:#0033CC; }
h3{border-bottom: solid 2px #DEDEDE; padding:6px 0; color:#000000; }
#msg{background:#FFFFCC; margin:10px; padding:4px; display:none; }
small {font-size:11px; margin-left:10px;}
</style>
body{font-family:'Lucida Grande', Verdana, sans-serif; font-size:14px; color:#666666;}
a:link, a:visited{color:#0033CC; }
h3{border-bottom: solid 2px #DEDEDE; padding:6px 0; color:#000000; }
#msg{background:#FFFFCC; margin:10px; padding:4px; display:none; }
small {font-size:11px; margin-left:10px;}
</style>
Step 2: Javascript Functions
This is the code for addElement() and removeElement() functions:
<script language="javascript">
numItem=1;
totalItem=0;
function addElement(){
// Define Elements
listItem = document.getElementById('listItems');
myElement = document.getElementById('myElements');
msgLayer = document.getElementById('msg');
totalItemLayer = document.getElementById('totalItem');
currentItem = listItem.value;
var newItem = document.createElement('li');
newItem.setAttribute('id','item'+numItem)
numOfItem = numItem++;
newItem.innerHTML = currentItem + ' <small><a href = "javascript:removeItem('+numOfItem+')">remove</a> </small>';
myElement.insertBefore(newItem, myElements.firstChild);
// Update total
totalItem++;
totalItemLayer.innerHTML= totalItem;
// Show Message
msgLayer.innerHTML='Item added!';
msgLayer.style.display="block";
}
function removeItem(idItem){
document.getElementById('item'+idItem).style.display = "none";
numItem= numItem-1;
totalItem--;
msgLayer.innerHTML='Item removed!';
msgLayer.style.display="block";
}
</script>
numItem=1;
totalItem=0;
function addElement(){
// Define Elements
listItem = document.getElementById('listItems');
myElement = document.getElementById('myElements');
msgLayer = document.getElementById('msg');
totalItemLayer = document.getElementById('totalItem');
currentItem = listItem.value;
var newItem = document.createElement('li');
newItem.setAttribute('id','item'+numItem)
numOfItem = numItem++;
newItem.innerHTML = currentItem + ' <small><a href = "javascript:removeItem('+numOfItem+')">remove</a> </small>';
myElement.insertBefore(newItem, myElements.firstChild);
// Update total
totalItem++;
totalItemLayer.innerHTML= totalItem;
// Show Message
msgLayer.innerHTML='Item added!';
msgLayer.style.display="block";
}
function removeItem(idItem){
document.getElementById('item'+idItem).style.display = "none";
numItem= numItem-1;
totalItem--;
msgLayer.innerHTML='Item removed!';
msgLayer.style.display="block";
}
</script>
Save and try it!
No comments:
Post a Comment