当用户输入一个值时,我可以如何使用JavaScript同时创建多个元素?

huangapple go评论58阅读模式
英文:

When a user inputs a value, how can I create multiple elements at the same time using JavaScript?

问题

我计划自动生成多个用户输入框。

例如:

如果用户输入10,每次自动生成3个输入框。所以用户会得到30个输入框。

我整天都在寻找解决方案,但还是没有成功。在我循环这段代码之前,它是可以工作的。但是在我循环之后,它就不再工作了。

这是我在循环之前得到的结果。CSS已经预先链接,所以它在一行上对齐。

当用户输入一个值时,我可以如何使用JavaScript同时创建多个元素?

// 仅获取一次输入值
const inputValue = document.querySelector(".inputBox").value;

// 在循环之外定义函数
function btnClick(){
   
  // 循环直到达到输入值
  let i = 0;
  while (i < inputValue) {
    // 创建一个新的div元素
    const divElement = document.createElement("div");
    const sp2 = document.querySelector(".page");
    const parentdiv = sp2.parentNode;
    parentdiv.insertBefore(divElement, sp2.nextSibling);

    // 给新的div元素添加类
    document.querySelectorAll("div")[2].classList.add("calBox");
    
    const length = "<p class='first'> Length : <input type='text' class='second' value='' /> </p>";
    const height = "<p class='first'> Height : <input type='text' class='second' value='' /> </p>";
    const width =  "<p class='first'> Width : <input type='text' class='second' value='' /> </p>";
    const first = document.querySelector(".calBox");
    const second = length + height + width + "<br />";

    first.innerHTML = second ;
    i++;
   
  }
}
英文:

I'm planning to auto-generate multiple user input boxes.

Example:

If the user inputs 10, auto-generate 3 input fields at each time. So the user gets 30 input fields.

I'm trying to find a solution all day long but it still doesn't work for me.
Before I looped this code it worked.
After I looped it it's no longer working.

This is what I got before looping. CSS was pre-linked that's why it's aligned at one line.

当用户输入一个值时,我可以如何使用JavaScript同时创建多个元素?

// Get the input value only once
const inputValue = document.querySelector(&quot;.inputBox&quot;).value;

// Define the function outside of the loop
function btnClick(){
   
  /// Loop until the input value is reached
  let i = 0;
  while (i &lt; inputValue) {
    // Create a new div element
    const divElement = document.createElement(&quot;div&quot;);
    const sp2 = document.querySelector(&quot;.page&quot;);
    const parentdiv = sp2.parentNode;
    parentdiv.insertBefore(divElement, sp2.nextSibling);

    //Adding class to new div element
    document.querySelectorAll(&quot;div&quot;)[2].classList.add(&quot;calBox&quot;);
    
    const length = &quot;&lt;p class=&#39;first&#39;&gt; Length : &lt;input type=&#39;text&#39; class=&#39;second&#39; value=&#39;&#39; /&gt; &lt;/p&gt;&quot;;
    const height = &quot;&lt;p class=&#39;first&#39;&gt; Height : &lt;input type=&#39;text&#39; class=&#39;second&#39; value=&#39;&#39; /&gt; &lt;/p&gt;&quot;;
    const width =  &quot;&lt;p class=&#39;first&#39;&gt; Width : &lt;input type=&#39;text&#39; class=&#39;second&#39; value=&#39;&#39; /&gt; &lt;/p&gt;&quot;;
    const first = document.querySelector(&quot;.calBox&quot;);
    const second = length + height + width +&quot;&lt;br /&gt;&quot;;

    first.innerHTML = second ;
    i++;
   
  }
}

答案1

得分: 1

这是一个使用文档片段接口的用例。

let button = document.querySelector("button");
button.addEventListener("click", function(e) {
  let quantity = parseInt(document.querySelector("#qty").value);
  if (quantity >= 0) {
    let fragment = new DocumentFragment();
    while (quantity--) {
      let input = document.createElement("input");
      fragment.append(input);
    }
    document.body.append(fragment);
  }
});
<input type="text" id="qty"><button>enter</button>
英文:

This is a use case for the document fragment interface.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let button = document.querySelector(&quot;button&quot;);
button.addEventListener(&quot;click&quot;,function(e){
  let quantity = parseInt(document.querySelector(&quot;#qty&quot;).value);
  if(quantity &gt;= 0) {
    let fragment = new DocumentFragment();
    while( quantity-- ) {
      let input = document.createElement(&quot;input&quot;);
      fragment.append(input);
    }
    document.body.append(fragment);
  }
  
});

<!-- language: lang-html -->

&lt;input type-text id=qty&gt;&lt;button&gt;enter

<!-- end snippet -->

答案2

得分: 0

const button = document.querySelector(".btn");
const buttonRest = document.querySelector(".reset");

button.addEventListener("click",function(e){
let quantity = parseInt(document.querySelector("#myNumber").value); //声明输入
if(quantity >= 0) {

  for (var i=1; quantity>=i ; i++){

var length = "<p class='first'>"+ i +". 长度 : <input type='number' class='second"+i+"' value='' /> </p>";
var height = "<p class='first'> 高度 : <input type='number' class='second"+i+"' value='' /> </p>";
var width =  "<p class='first'> 宽度 : <input type='number' class='second"+i+"' value='' /> </p>";

var inputTotal = length + height + width;

document.querySelector(".calBox").innerHTML += inputTotal;
}
button.disabled=true;

}
});

buttonRest.addEventListener("click", function(){
location.reload(true)
});

Below are HTML code

Total Cargo Box :


这是我为此问题提供的解决方案,感谢 @Ronnie Royston 的代码和思路启发。
我通过他的代码复制和思考出了自己的方法。
希望这篇文章对其他人也有所帮助。

现在我需要考虑关于这个问题的计算过程,希望你们编码愉快。

英文:
    const button = document.querySelector(&quot;.btn&quot;);
    const buttonRest = document.querySelector(&quot;.reset&quot;);
    
    button.addEventListener(&quot;click&quot;,function(e){
      let quantity = parseInt(document.querySelector(&quot;#myNumber&quot;).value);  //Declare input
      if(quantity &gt;= 0) {
    
          for (var i=1; quantity&gt;=i ; i++){
    
        var length = &quot;&lt;p class=&#39;first&#39;&gt;&quot;+ i +&quot;. Length : &lt;input type=&#39;number&#39; class=&#39;second&quot;+i+&quot;&#39; value=&#39;&#39; /&gt; &lt;/p&gt;&quot;;
        var height = &quot;&lt;p class=&#39;first&#39;&gt; Height : &lt;input type=&#39;number&#39; class=&#39;second&quot;+i+&quot;&#39; value=&#39;&#39; /&gt; &lt;/p&gt;&quot;;
        var width =  &quot;&lt;p class=&#39;first&#39;&gt; Width : &lt;input type=&#39;number&#39; class=&#39;second&quot;+i+&quot;&#39; value=&#39;&#39; /&gt; &lt;/p&gt;&quot;;
          
        var inputTotal = length + height + width;
    
        document.querySelector(&quot;.calBox&quot;).innerHTML += inputTotal;
        }
        button.disabled=true;
      }
    });
    
      buttonRest.addEventListener(&quot;click&quot;, function(){
        location.reload(true)
      });

Below are HTML code

      &lt;p class=&quot;askCargoBox&quot;&gt;Total Cargo Box : 
                &lt;input type=&quot;number&quot; id=&quot;myNumber&quot; placeholder=&quot;Number&quot;/&gt; 
                &lt;button class=&quot;btn&quot;&gt; Comfirm &lt;/button&gt;
                &lt;button class=&quot;reset&quot;&gt; Reset &lt;/button&gt;
            &lt;/p&gt;

This's a solution what i was done for and thanks for @Ronnie Royston
I figure out by his code replicate and thinking my own ways .
I hope this article will help other guy too.

now i need to think about calculation process about this so
hope u guys happy coding

huangapple
  • 本文由 发表于 2023年8月9日 04:42:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/76863091.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定