<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Assignment 3 </title>
<script src="../JAVASCRIPT/question2.js" defer></script>
</head>
<body>
<h1>Shopping List</h1>
<input type="text" id="firstname" >
<input type='submit' onclick='changeText2()' value='Add Item' />
<input type="text" id="delitem" >
<input type='button' onclick='getNames()' value='Delete Item' />
<br><ol id="demo"></ol>
<input type='button' onclick='delevrytin()' id="evetang" value='Delete all' />
</body>
</html>
var list = document.getElementById('demo'); //demo is the organised list
//this function is for the add button
function changeText2() {
var firstname = document.getElementById("firstname").value
// the if satatement alerts if input is blank
if ((firstname == "") || (firstname == null)) {
alert("can't be blank");
return; //alerts if noting is inputed and add is clicked
}
//creates a list item
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(firstname));
list.appendChild(entry);
document.getElementById('firstname').value = ''; //clears textbox
}
// this function clears specific item starting from 0
var list = document.getElementById('demo');
function getNames()
{
var remov = document.getElementById('delitem').value;
list.removeChild(list.childNodes[remov]);
}
//delete all button
function delevrytin()
{
document.getElementById('demo').remove;
}
my problem is the delevrytin function when clicked it works but stops the other functions from working. Can anyone solve my problem emphasized text would be greatly appreciated
all good its running for me now few variables and id's changed
var list = document.getElementById('org'); // var for the organized list gets it by id
//this function is for the add button
function changeText2() {
var firstitem = document.getElementById("firstitem").value
// the if statement alerts if input is blank
if ((firstitem == "") || (firstitem == null)) {
alert("can't be blank");
return; //alerts if noting is inputed and add is clicked
}
//creates a list item
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(firstitem));
list.appendChild(entry);
document.getElementById('firstitem').value = ''; //clears textbox
}
// this function clears specific item starting from 0
function getNames()
{ // creates a variable and assigns it to the delitem input
var remov = document.getElementById('delitem').value;
//remove - 1 lets you delete the list item but the number beside it
list.removeChild(list.childNodes[remov = remov - 1]);
}
//delete all button
function delevrytin()
{ //if there is a child node remove it
while (list.firstChild) {
list.removeChild(list.firstChild);
}
}