Question

我正试图弄清楚如何在点击“提交”按钮后添加文本框。我已经尝试过我所知道的一切，但我似乎无法得到结果。我还想制作最大数量的文本框25。

以下是一些HTML：

 <div class="title">
    <h1>Calculated Test Scores</h1>
 </div>
    <h5># of Students: <input type="text"></h5>
    <div class="container">
    <button type="button" class="submit">Submit</button>
    </div>
    <h5>Scores: <input type="text"></h5>
    <div class="container">
    <button type="button" class="calculate">Calculate</button>
    </div>
    <h6>The average is:</h6>

这是JS：

$(function() {

    $(".submit").click(function() {
        for(var i=0; i < 26; i++)
        $(".submit").append(arr[i])
    });

    $(".calculate").click(function() {
        for(var i=0; i < arr.length; i++)
        sum=sum + arr[i];
        Average = sum/arr.length;
    });

});

Answer 1

我不确定什么是arr，但我只是添加了几个输入，即25。这是

jsfiddle

Bob (3)
Heather (1)
Jake (2)

如果您正在寻找这件事，请告诉我。

Answer 2

请查看工作原型（略微修改标记）：

$(".submit").click(function() {
  var newContent = "";
  for (var i = 0; i < $("#scount").val(); i++)
    newContent += "<input type='text'/>";
  $(".dynamic_inputs").html(newContent);
});

$(".calculate").click(function() {
  var sum = 0;
  $(".dynamic_inputs input").each(function() {
    sum = sum + parseInt($(this).val());
  });
  var avg = sum / $(".dynamic_inputs input").length;
  $("h6").text("The average is: " + avg);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="title">
  <h1>Calculated Test Scores</h1>
</div>
<h5># of Students: <input id="scount" type="text"></h5>
<div class="container">
  <button type="button" class="submit">Submit</button>
</div>
<h5>Scores: </h5>
<div class="dynamic_inputs"></div>
<hr/>
<div class="container">
  <button type="button" class="calculate">Calculate</button>
</div>
<h6>The average is:</h6>

如何在按钮上单击添加或附加文本框？

2 个答案: