Question

我有一个带JavaScript的HTML代码。我将表单设置为打印到控制台。我的问题是，当它打印多个选项或复选框时，它仍会在最后一次选择后打印逗号。示例＆＃34;红色，白色，＆＃34;我希望白色之后的逗号不打印。请告知如何摆脱最后一个逗号。提前谢谢

<!DOCTYPE html>

<html>
<head>
    <title>Extra Credit</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript">

        function onConsole()
        {
            var select = document.getElementById('colorSelect').value;
            console.log("Drop-Down: " + select);

            var a = " ";
            var multi = document.getElementsByName('multiColor')
                for(i=0; i < multi.length; i++)
                {
                    if(multi[i].selected === true)
                    {
                        a = a + multi[i].value + ", ";  
                    }
                }
                console.log("Multi-Select: " + a);

                var b = " ";
                var box = document.getElementsByName('checkboxColor')
                for(i = 0; i < box.length; i++)
                {
                    if(box[i].checked === true)
                    {
                        b = b + box[i].value + ", ";
                    }
                }
                console.log("Checkboxes: " + b);

            var radio = document.getElementsByName('radioColor')
                for(i=0; i < radio.length; i++)
                {
                    if(radio[i].checked === true)
                    {
                        console.log("Radio Button: " + radio[i].value);
                    }
                }              

            var text = document.getElementById('textArea').value;
            console.log("Text Area: " + text);
        }
    </script>

</head>
<body>    

    <form name= "ColorForms" action="InClass.html" method="post" onSubmit="onConsole()">

        <select id="colorSelect">
            <option>Choose a Color</option>
            <option value="red">red</option>
            <option value="white">white</option>
            <option value="blue">blue</option>
            <option value="orange">orange</option>
        </select>

        <br><br>

        <select multiple>
            <option value="red" name="multiColor">red</option>
            <option value="white" name="multiColor">white</option>
            <option value="blue" name="multiColor">blue</option>
            <option value="orange" name="multiColor">orange</option>
        </select>

        <br><br>

        <input type="checkbox" name="checkboxColor" value="red">red<br>
        <input type="checkbox" name="checkboxColor" value="white">white<br>
        <input type="checkbox" name="checkboxColor" value="blue">blue<br>
        <input type="checkbox" name="checkboxColor" value="orange">orange<br>

        <br><br>

        <input type="radio" name="radioColor" value="red">red<br>
        <input type="radio" name="radioColor" value="white">white<br>
        <input type="radio" name="radioColor" value="blue">blue<br>
        <input type="radio" name="radioColor" value="orange">orange<br>       

        <br><br>

        <textarea rows="4" cols="50" id="textArea"></textarea>

        <br>

        <input type="submit" value="Submit">
    </form>
</body>
</html>

Answer 1

一般来说，你现在所做的是

var array = ['a', 'b', 'c'], str = '';
for (var i = 0; i < array.length; i++) {
    str += array[i] + ', ';
}

并且在每个元素之后添加逗号，包括最后一个元素。

您应该使用在方法之间插入字符串的Array方法join，例如：

var array = ['a', 'b', 'c'],
    str = array.join(', ');

或更接近你的案件

var multi = document.getElementsByName('multiColor'),
    values = Array.from(multi).filter(function (el) {
        return el.selected;
    }).map(function (el) {
        return el.value;
    }),
    a = values.join(', ');
console.log("Multi-Select: " + a);

Answer 2

您可以在字符串末尾修剪逗号，如下所示。

<input>

或者您无法使用下面的代码首先添加最终的逗号。任何一个选项都可以正常工作。除非你循环遍历数百个项目，否则在循环之后修剪字符串中的最后一个逗号将是最有效的。

if (a.substr(a.length - 1, 1) === ",") {
    a = a.slice(0, a.length - 1);
}

将JavaScript表单打印到控制台

2 个答案: