添加字段而不重置所有字段 [英] adding a field without resetting all fields

问题描述

你好，我需要添加字段，并用加号和减号删除。每当我添加一个字段时，它都可以正常工作。当我在某个字段中输入内容然后添加另一个字段时，先前的字段将重置。另外，每当我单击减号按钮时，它都会删除所有字段。我希望它一次取一个而不重置其他字段，并且每当我单击减号按钮时，我一直收到Not Not Number（NaN）错误。任何帮助是极大的赞赏。我将在下面显示我的代码。

Hello I need to have fields be added and taken away with plus and minus buttons. Whenever I add a field it works fine. When I enter something into a field then add another field, the previous field resets. Also, whenever I click the minus button it removes all of the fields. I want it to take one away at a time without resetting the other fields and also I keep getting a Not a Number (NaN) error whenever I click the minus button. Any help is greatly appreciated. I'll show my code below.

<input name="+" type="button" id="+" onclick="addInput()" value="+" label="+" />
<input name="-" type="button" id="-" onclick="subtractInput()" value="-" label="-" />

<span id="response"></span>
<script>
    var countBox = 1;
    var boxName = 0;

    function addInput() {
        var boxName = "#";
        document.getElementById('response').innerHTML += '<br/><input type="text" id="' + boxName + '" value="' + boxName + '" "  /><br/>';
        countBox += 1;
    }

    function subtractInput() {
        var boxName = "#";
        document.getElementById('response').innerHTML -= '<br/><input type="text" id="' + boxName + '" value="' + boxName + '" "  /><br/>';
        countBox -= 1;
    }
</script>

推荐答案

尝试一下！

我将您的代码包装在div中[并删除了响应范围]

I wrapped your code within a div [and removed the 'response' span]

<div id="container">
    <input name="+" type="button" id="+" onclick="addInput()" value="+" label="+" />
    <input name="-" type="button" id="-" onclick="subtractInput()" value="-" label="-" />
</div>

然后按如下所示更改您的JavaScript：

Then changed up your javascript as shown here:

var countBox = 1;

function addInput() {
    var breakNode = document.createElement("br");
    breakNode.className = countBox.toString();

    var input = document.createElement("input");
    input.type = "text";
    input.className = countBox.toString();
    input.value = "#" + countBox.toString();

    var container = document.getElementById('container');
    container.appendChild(breakNode);
    container.appendChild(input);

    countBox += 1;
}

function subtractInput() {
    countBox -= 1;

    // There will be 2 elements: 1 input, 1 br.
    var elements = document.getElementsByClassName(countBox.toString());
    var input = elements[1];
    var br = elements[0];

    input.parentNode.removeChild(input);
    br.parentNode.removeChild(br);
}

尝试使用此小提琴

让我知道您是否有问题！

Let me know if you have problems with it!

编辑：我制作了一个更干净的版本，您现在可以通过以下方式签出：）

I made a cleaner version you can now check out by the way :)

参考文献：

1. 动态创建输入元素


2. 删除HTML中的子节点

1. Create Input Element Dynamically
2. Remove Child Node in HTML

编辑2： 这是您新问题的解决方案：

EDIT 2: Here's the solution to your new question:

首先，我在名称 1 上添加了 ECPartNumber 的第一个输入，并将其 id 更改为1：

First, I added a 1 to the name ECPartNumber of the first input, and changed its id to 1:

<input name="ECPartNumber1" type="text" id="1" value="#" size="10" maxlength="10">

我将id更改为1的原因是因为以下输入具有其 id 从1开始计数，所以我认为这样看起来更好。

The reason I changed the id to 1 is because the following inputs have their ids counting up from 1, so I thought this would look nicer.

接下来，我声明了 var countBox = 1; 放在javascript文件顶部，以便 FrontPage_Form1_Validator 函数可以使用它。

Next, I declared var countBox = 1; at the top of the javascript file so that the FrontPage_Form1_Validator function would be able to use it.

在 addInput 函数中，我添加了一行以为每个输入创建新名称：

In the addInput function, I added a line to create the new names for each input:

input.name = "ECPartNumber" + countBox.toString();

在 subtractInput 函数中，添加了一个if语句，以确保您不能删除原始的ECPartNumber输入：

In the subtractInput function, I added an if statement to make sure you couldn't delete the original ECPartNumber input:

if (countBox >= 2) {
    ...
}

最后，在 FrontPage_Form1_Validator 函数我创建了一个for循环，该循环运行每个ECPartNumber的名称以检查它们是否为＃或更多：

And finally, in the FrontPage_Form1_Validator function I made a for loop that runs off the names of each ECPartNumber to check if they are "#" or more:

for (var i = 1; i <= countBox; i++) {
    var partNum = "ECPartNumber" + i.toString();
    if (theForm[partNum].value == "#") {
        alert("Please enter a value for the \"EC Part Number\" field. (slot "+i+")");
        theForm[partNum].focus();
        return (false);
    }
}

更新了小提琴

这篇关于添加字段而不重置所有字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！