My next and prev button for the list isn't working

by TulMagar   Last Updated May 16, 2019 00:26 AM

The problem: I am not able to get the value of the HTML list from javascript. Each time user click next button, the program will count how many times the user clicks the next button. In javascript, I called the HTML list and iterate it. inside for loop, I called user click on next button number and add 1, The result of the sum will go inside the array and display that array line data. I don't know because of some reason I can't able to get data. Let me know if you get confused

Here is the HTML code

<div id="Border" class="">

        <div id="Topic_List" class="creature">
            <ul id="ListName" class="">
            <li><a href=""> Google </a></li>
            <li><a href="">Facebook</a></li>
            <li><a href=""> Google </a></li>



    <div id="" class="" style="clear:both;"></div>

    <div id="InputInsideFullCover" class="">

    <textarea id="File_Name" name="File_Name"></textarea>

    <button id="clickme" onclick="Next()"> Next </button>
    <button onclick="Prev()"> Prev </button>

Here is the JavaScript code

        function Next(){

        var button = document.getElementById("clickme"),
        count = 0;
        button.onclick = function() {
        count += 1;

        var ul = document.getElementById("ListName");
        var items = ul.getElementsByTagName("li");

        for (var i = 0; i < items.length; ++i) {

            var GetButtonClickValue = count;

            var AddOne = GetButtonClickValue + 1;

            var file_name = document.getElementById("ListName").innnerHTML=items[AddOne];
            document.getElementById("File_Name").href = file_name;
            var url_to_file = ""+file_name;
                    url: url_to_file,
                    error: function()
                        alert('data not found.');
                    success: function()


        if(count > 9){
            count = " ";
            count = 1;

            button.innerHTML = "Click me: " + count;




here is the CSS code

        #Border{margin:5px auto;padding:0;width:50px;height:auto;border:1px solid #666;background-color:#f1f1f1}
        #Topic_List ul{margin:0px;padding:0;height:auto;width:12px;}
        #Topic_List li{margin:0px;padding:0;list-style-type:none;float:left}
                background-color: #4CAF50; /* Green background */
                border: 1px solid green; /* Green border */
                color: white; /* White text */
                padding: 10px 24px; /* Some padding */
                cursor: pointer; /* Pointer/hand icon */
                width: 50%; /* Set a width if needed */
                display: block; /* Make the buttons appear below each other */

                .btn-group button:not(:last-child) {
                border-bottom: none; /* Prevent double borders */

                /* Add a background color on hover */
                .btn-group button:hover {
                background-color: #3e8e41;


Answers 1

You are declaring count to 0 at the beginning of the function. So every time the button is clicked count equals 0 and then one is added. (It will always be 1) You need to pull the count var outside of the function. This will also be useful for your Prev function. I bet that your Next and prev functions will be similar enough to make only one function. Call your function with true or false to add or subtract the count.

Courd Headman
Courd Headman
May 16, 2019 00:25 AM

Related Questions

Updated October 13, 2018 09:26 AM

Updated December 11, 2017 00:26 AM

Updated June 28, 2018 22:26 PM

Updated January 30, 2017 14:11 PM