我们想要实现什么目标？

Question

我有来自Spring MVC的List <String>，我想在浏览器上拆分，切片和打印。问题是我需要将slice（）方法的开始和结束参数作为text-field中的变量输入。这是我的代码，但它不起作用。有人可以帮助我吗？这是我的代码：

    <body>
    <form>First value:
        <br/>
        <input type="text" id="firstvalue" />Last value:
        <br/>
        <input type="text" id="lastvalue" />
        <button onclick="myFunction()">Press</button>
        <p id="demos"></p>
    </form>
    <script>
        function myFunction() {
            var str = "${first}";
            var arr = str.split(",");
            var first = document.getElementById('firstvalue');
            var second = document.getElementById('lastvalue');

            document.getElementById("demos").innerHTML = arr.slice('first', 'second');

        }
    </script>
</body>

提前谢谢！

Answer 1

您的代码中存在一些问题。

如果${first}为List<String>，则需要将其转换为连续的单个逗号分隔字符串。因为${first}只是打印列表对象。
slice期望索引是数字，您正在传递String
您没有在document.getElementById
您没有先将用户输入变量传递给切片，而是传递硬编码字符串'first'和'second'。

以下是固定代码

HTML

<form>First value:
    <br/>
    <input type="text" id="firstvalue" />Last value:
    <br/>
    <input type="text" id="lastvalue" />
    <button onclick="myFunction(event)">Press</button>
    <p id="demos"></p>
</form>

JS

var myFunction = function (e) { 

    var str = "${first}" // assuming this contains string like "1,2,3,4,5,6,7,8,9,10"; and not the List obect
    var arr = str.split(",");
    var first = document.getElementById('firstvalue').value;
    var second = document.getElementById('lastvalue').value;

    document.getElementById("demos").innerHTML = arr.slice(parseInt(first, 10),   parseInt(second, 10)).toString();
    e.preventDefault();
};

Answer 2

我们想要实现什么目标？

我们有两个输入文本字段：一个包含起始值，另一个包含结束值。点击一下，我们想要创建一个从开始到结束值的范围，并将其输出到容器中。

解决方案

解决方案比预期更简单，我们不需要拆分，切片和部分。此外，我们并不需要包含所有值的预定义列表。

实施例

<html>
    <head>
        <script>
            function evalRange(){
                var tS = parseInt(document.querySelector('#inFrom').value); //Our start value;
                var tE = parseInt(document.querySelector('#inTo').value); //Our end value;
                var tR = document.querySelector('#demos'); //Our output div

                if (tE >= tS){
                    //We are using the Array.apply prototype to create a range
                    var tL = Array.apply(null, Array(tE - tS + 1)).map(function (a, i){return tS + i});

                    //We output the range into the demos div
                    tR.innerHTML = tL.join(',')
                }
                else tR.innerHTML = 'To has to be higher than from';

                //Returning the range list
                return tL
            }
        </script>
    </head>

    <body>
        <input type = 'text' id = 'inFrom' value = '10' />
        <input type = 'text' id = 'inTo' value = '20' />
        <b onclick = 'evalRange()'>Range</b>
        <div id = 'demos'></div>
    </body>
</html>

这是一个小提琴：https://jsfiddle.net/91v3jg66/

从列表<string>获取值，拆分它们，然后使用JavaScript按部分对它们进行切片

2 个答案:

我们想要实现什么目标？

解决方案

实施例