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

问题描述

问题：我无法从 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>

标签： javascripthtmlcss

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

问题描述

解决方案

推荐阅读