Question

我创建了一个简单的表单，用户只能输入数字。当他们这样做时，根据用户输入到输入字段的数字，应在浏览器中显示一些div（框）。

这一切都在CodePen完成。

这是我的HTML。

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:700" 
  rel="stylesheet">
</head>

<body>

   <!--_-_-_-_INPUT_FIELD_-_-_-_-->
   <div class="input-container">
    <form id="inputForm">
     <input type="number" id="input-box" name="quantity" min="1" max="">
     <input id="filldetails" name="submit" type="submit" value="Add 
       boxes">
    </form>
   </div>

  <!--_-_-_-_BOX-Container_-_-_-_-->
  <div class="boxes-container">
    <div id="boxes"></div>
  </div>

</body>

这是我的JS

const form = document.getElementById('inputForm');
const input = inputForm.querySelector('input');

form.addEventListener('submit', (e) => {
  const boxInput = input.value;
  console.log(input.value);
});

我收到提交表单以响应控制台，所以我知道它正在工作。

我的问题是：

如何获取用户输入以在DOM中创建与用户想要的div一样多的div？

我是否在输入字段中使用for循环遍历div多次，就像用户输入的那样？如果是这样，最佳做法是什么？

我还希望当用户打开页面时，看到零div是可见的，当添加一个数字时，div的节目，如果这有意义吗？

谢谢:)

Answer 1

我想看看jQuery的.clone()方法。

创建名为.hide的类，并将其设置为.hide { display: none; }

将此添加到HTML中已有的Square元素。

您将要执行的操作是克隆此方格x次，并删除每个.hide类。

这可以这样做：

HTML：

<form class="boxForm">
    <input type="number" class="boxInput"/>
    <input type="submit" value="Submit"/>
</form>
<div class="boxContainer">
    <div class="box hide"></div>
</div>

CSS：

.box {
    height: 100px;
    width: 100px;
    background-color: red;
}
.hide {
    display: none;
}

JS：

$(function(){

    $('.boxForm').submit(function(e){
        e.preventDefault();
        var amount = $('.boxInput').val();
        for(i=0; i<amount; i++){
            var newBox = $('.hide').clone();
            newBox.removeClass('hide');
            newBox.appendTo('.boxContainer');
        }
    });

});

JSFIDDLE链接使用与上面相同的代码：

https://jsfiddle.net/Panomosh/3ba9uu9o/

JSFIDDLE在评论中使用<ul>元素链接

https://jsfiddle.net/Panomosh/3ba9uu9o/4/

Answer 2

您必须将输入放在绑定事件中：

const form = document.getElementById('inputForm');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // stop the form submission
  const input = form.querySelector('input');
  const boxInput = input.value; // get the value
  let box = document.querySelector('#boxes');
    box.innerHTML="";
  for (let i = 0; i < boxInput; i++) { // loop over the input value
    let div = document.createElement('div'); // create div elem
    div.textContent = `Box-${i}`
    box.appendChild(div); // now append in the DOM elem
  }
});

<div class="input-container">
  <form id="inputForm">
    <input type="number" id="input-box" name="quantity" min="1" max="">
    <input id="filldetails" name="submit" type="submit" value="Add 
       boxes">
  </form>
</div>

<!--_-_-_-_BOX-Container_-_-_-_-->
<div class="boxes-container">
  <div id="boxes"></div>
</div>

Answer 3

这是一个基于您的codepen的解决方案，不需要jQuery：

＆＃13;

var form = document.getElementById('inputForm');

 form.addEventListener('submit', function(e) {
  e.preventDefault(); // stop the form submission

  var input = form.querySelector('input');
  var boxInput = input.value;

  for(var i=0; i < boxInput; i++){
     var div = document.createElement('div');
     div.className = 'box';
     document.getElementById('boxes-container').appendChild(div);
  }
});

＆＃13;

#boxes-container {
  width: 100%;
  display: flex;
  margin: 10px;
  flex-wrap': 'wrap;
}

.box {
  background-color: tomato;
  margin: 10px;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  opacity: 0.5;
}

＆＃13;

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
</head>

<body>
  
  <!--_-_-_-_INPUT_FIELD_-_-_-_-->
  <div class="input-container">
    <form id="inputForm">
      <input type="number" id="input-box" name="quantity" min="1" max="">
      <input id="filldetails" name="submit" type="submit" value="Add boxes">
    </form>
  </div>
  
  <!--_-_-_-_BOX-Container_-_-_-_-->
  <div id="boxes-container">
    <div class="box"></div>
  </div>
  
</body>

＆＃13;

如何根据用户输入在DOM中添加div的数量

3 个答案: