Search code examples
javascripthtmlremovechild

how to keep code running after last function executed, im a newbie to this sorry if doesnt make sense


<!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


Solution

  • 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);
                    }
            }