列表的下一个和上一个按钮不起作用

Question

问题：我无法从javascript获取HTML列表的值。 每次用户单击下一个按钮时，程序将计算用户单击下一个按钮的次数。 在javascript中，我调用HTML列表并迭代它。 在for循环中，我调用用户点击下一个按钮编号并添加1，总和的结果将进入数组内部并显示该数组行数据。 我不知道因为某些原因我无法获取数据。 如果你感到困惑，请告诉我

这是HTML代码

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

        <div id="Topic_List" class="creature">
            <ul id="ListName" class="">
            <li><a href="https://www.google.com/"> Google </a></li>
            <li><a href="https://www.facebook.com/">Facebook</a></li>
            <li><a href="https://www.google.com/"> Google </a></li>
        </ul>

        </div>  

</div>


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

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

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

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

这是JavaScript代码

<script>
        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 = "http://www.example.com/"+file_name;
                $.ajax({
                    url: url_to_file,
                    type:'HEAD',
                    error: function()
                    {
                        alert('data not found.');
                    },
                    success: function()
                    {

                    }
            });
        }

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

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

        }
        };


    }

    </script>

这是CSS代码

<style>
        #Border{margin:5px auto;padding:0;width:50px;height:auto;border:1px solid #666;background-color:#f1f1f1}
        #InputInsideFullCover{margin:5px;padding:0;width:700px;height:auto;}
        #File_Name{margin:0;padding:0;width:638px;height:25px;resize:none;}
        #Topic_List{margin:5px;padding:0;width:640px;height:auto;}
        #Topic_List ul{margin:0px;padding:0;height:auto;width:12px;}
        #Topic_List li{margin:0px;padding:0;list-style-type:none;float:left}
        #button{
                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;
                }


    </style>

Answer 1

您在函数开头声明计数为0。 因此，每次单击按钮时，count等于0，然后添加一个。 （它将始终为1）您需要将count var拉到函数外部。 这对你的Prev功能也很有用。 我敢打赌，你的Next和prev函数将足够相似，只能生成一个函数。 使用true或false调用函数以添加或减去计数。

Answer 2

只需添加此内容

<script src="jquery-3.4.0.min.js"></script>

在外部脚本标记之前的头标记中

因为你正在使用ajax你需要jquery