如何使用输入字段创建按钮?

时间:2020-09-23 21:59:21

标签: javascript user-input

因此,我试图让用户在输入字段中输入数字,然后当他们单击提交按钮时,它将创建他们放入输入字段中的按钮数量。例如,他们在输入字段中输入“ 4”,点击“提交”按钮,它将创建4个按钮。

我对段落也做了同样的事情。代码在这里:


function submit()
{
    if(!isFinished)
    {

        var choice = parseInt(document.getElementById("paragraphs").value);

        if(choice > 0 && choice <= 5)
        {
            var para = document.getElementById("paragraphs").value;
            var container = document.getElementById("container");

            while (container.hasChildNodes()) 
            {
                container.removeChild(container.lastChild);
            }
        
            for (i = 0; i < para; i++)
            {                
                container.appendChild(document.createTextNode("Paragraph Number " + (i+1)));
                var input = document.createElement("input");
                input.type = "text";
                container.appendChild(document.createElement("br"));
            }
    
            console.log(para + " paragraphs were created.")
        }
    }
}

我该如何使用按钮做同样的事情?

1 个答案:

答案 0 :(得分:1)

与David同意,问题中需要更多细节。希望以下内容可以帮助您指出正确的方向! :)

function submit(e) {
  e.preventDefault();
  
  var choice = document.getElementById("paragraphs").value;
  var container = document.getElementById("container");
  
  // clear container buttons
  container.innerHTML = "";
  
  // add buttons
  for (var i = 0; i < choice; i++) {
    var button = document.createElement('button');
    button.innerHTML = "Button " + i;
    container.appendChild(button);
  }
}

https://jsfiddle.net/9kufoev1/