原生js下的输入框增减

最新推荐文章于 2024-04-30 14:07:40 发布

caoxionggang

最新推荐文章于 2024-04-30 14:07:40 发布

阅读量378

点赞数

文章标签： javascript 原生

本文链接：https://blog.csdn.net/qq_40947321/article/details/102826274

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>addMoreInput</title>
</head>
<body>
    <div id="inputCollection">
        <input placeholder="输入内容" style="display: inline-block" class="inputClass" id="1">
        <button onclick="addInput()" id="addBtn">+</button>
        <button onclick="minusInput()" id="minusBtn">-</button>
    </div>
    <button style="display: block;margin-top:20px" onclick="submit()">提交</button>

    <script>
        if(document.querySelectorAll('input').length === 1){
            document.getElementById("minusBtn").disabled = true;
        }

        //添加输入框
        function addInput(){
            var id = document.querySelectorAll('input').length + 1;
            document.getElementById("minusBtn").disabled = false;
            var a = document.getElementById("inputCollection");
            var addInput = document.createElement('input');
            addInput.style.display = "block";
            addInput.className = "inputClass";
            addInput.id = (id);
            a.append(addInput);
        }

        //移除输入框
        function minusInput(){
            var minusInputBefore = document.querySelectorAll('input').length;
            if(minusInputBefore !== 1){
                var b = document.getElementById("inputCollection");
                var removeId = minusInputBefore.toString();
                b.removeChild(document.getElementById(removeId));
            }
            var minusInputAfter = document.querySelectorAll('input').length;
            console.log("minus  inputLength:" + minusInputAfter);
            if(minusInputAfter === 1){
                document.getElementById("minusBtn").disabled = true;
            }
        }

        //获取各个输入框的值，组成数组
        function submit() {
            var inputNum = document.querySelectorAll('input').length;
            var valueArr = [];
            for(var i=0;i<inputNum;i++){
                id = i+1;
                valueArr.push(document.getElementById(id).value);
            }
            console.log(valueArr);
        }
    </script>
    <style>
        .inputClass{
            margin-top:10px;
        }
    </style>
</body>
</html>

caoxionggang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js下的输入框增减

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>addMoreInput</title></head><body> <div id="inputCollection"> ...
复制链接

扫一扫