繁体   English   中英

将JavaScript表单打印到控制台

[英]printing a JavaScript form to a console

我有一个带JavaScript的HTML代码。 我将表格设置为打印到控制台。 我的问题是,当它打印多个选择或复选框时,在最后一个选择之后仍会打印逗号。 例如“红色,白色”,我希望白色后的逗号不打印。 请提供有关如何删除最后一个逗号的建议。 先感谢您

<!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>

一般来说,您现在要做的是

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);

您可以按如下所示将逗号从字符串末尾删减。

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

否则,您无法使用以下代码首先添加最后一个逗号。 两种选择都可以。 除非您要遍历数百个项目,否则在循环之后从字符串中修剪最终逗号将是最有效的。

a = a + multi[i].value + (i===multi.length ? "":", ");

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM