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

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

Answer 2

只需添加

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

在您的head标签中，在外部脚本标签之前

由于您使用的是ajax，因此需要使用jQuery

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

2 个答案: