CODEWITHSUNDEEP
javascript
J V
J V

Reputation: 35

Why does my delete all button need to be double clicked to work?

So, I was adding a delete all button and it works, the only problem is that it needs to be double clicked just to make it work.

may I ask what's wrong? thank you :)

I added the codes that were used to create the button here:

<body>
<!--for everything in the navigation part including the add favorite bar-->
<div class="topnav">

    <div class="addFave">
        <!--the text bar-->
        <input type="text" name="enter" class="enter" value="" id="added"  placeholder= "Add Favorites"/>
        <!--the enter button-->
        <input type="button" value="Enter" id = "addIt" OnClick="adding()" />
        <!--for the script of the add favorite bar to add its functions-->
        <script type="text/javascript">
            var faves = [];

            var y = document.getElementById("added");
                function adding() {
                    faves.push(y.value);
                    document.getElementById("faveLists").innerHTML = faves;
                }
            var input = document.getElementById("added");
                input.addEventListener("keyup", function(event) {
                    event.preventDefault();
                    if (event.keyCode === 13) {
                    document.getElementById("addIt").click();
                }
            }); 
        </script>
    </div>
</div>


<br />

<div class="buttons">
    <button onclick="eradicateFaves()">Remove All Favorite</button>


    <script>
-coding to remove all the favorites on the list-->
        function eradicateFaves(){
            document.getElementById("faveLists").innerHTML = faves;
                while(faves.length > 0){                   
                faves.shift();
            }
        }    

    </script>
</div>
<p id = "faveLists"></p>

Upvotes: 0

Views: 467

Answers (2)

Jack Bashford
Jack Bashford

Reputation: 44145

When you say "delete all" I assume you mean reset the faves array back to []. Well why not just do this:

function eradicateFaves() {
    faces = [];
    document.getElementById("faveLists").innerHTML = faves;
}

The reason it wasn't working earlier was because Array.prototype.shift() only removes the first element of the array. According to the MDN docs:

The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.

Upvotes: 0

Ken Y-N
Ken Y-N

Reputation: 15018

while(faves.length > 0){                   
    faves.shift();
}

Why not just faves = [] to empty it? And shouldn't you empty the list before assigning it? That's why you need two clicks; first time re-assigns current list then empties it, and second time assigns the empty list then does nothing more as it is already empty. So, try this:

function eradicateFaves(){
    faves = [];
    document.getElementById("faveLists").innerHTML = faves;
}

Upvotes: 2

Related Questions