添加 HTML 直到达到要求

Question

我正在尝试创建一个表单，我需要用户在其中添加至少 3 年的地址数据。但是，根据用户是否输入了正确的年数，我在添加和删除字段时遇到了问题。

例如，将 1 添加到下面的年份框中 3 次就可以了。我得到 3 组地址字段，但是如果用户随后将最后一组更改为 2 年，则会添加第 4 组，而实际上什么都不应该发生。

如果我随后将第二个地址更改为 2/3 年，它似乎也会出现故障，它会按原样删除以下地址，但将其改回 1 年并不会重新添加这些附加字段。

希望这是有道理的，我只需要一个手来让这个逻辑工作，因为我无法弄清楚。不要评论我创建的用于生成 HTML 的函数，这只是为了完成这项工作，请坚持主题。

注意：忽略底部 3 个功能，这些不是问题，也不是我的优先事项。

fieldset > div {

  padding: 10px;

  margin: 5px;

  background: whitesmoke;

  border: 1px solid lightgray;

}

<fieldset>

    <h3>Address Details * denotes a required field</h3>

    <div>

        <div id="previousAddress0">

          <div>

              <div><label for="previous_address0">Address</label></div>

              <div><textarea cols="40" id="previous_address0" name="finprop_previous_address0" placeholder="Previous Address" rows="4"></textarea></div>

              <div></div>

          </div>

          <div id="previous_row_postcode0">

              <div><label for="previous_postcode0">Postcode *</label></div>

              <div><input id="previous_postcode0" name="previous_postcode0" placeholder="Postcode" type="text" maxlength="8">  

              </div>

              <div></div>

          </div>

          <div id="row_months_years_at_address0">

              <div><label for="years_at_address_0">How long at address *</label></div>

              <div>

                  <div><input id="years_at_address_0" maxlength="2" min="0" name="finprop_years_at_address0" placeholder="Years" size="4" type="text" class="years_at_address0"></div>

                  <div><input id="months_at_address_0" maxlength="2" min="0" name="finprop_months_at_address0" placeholder="Months" size="4" type="text"></div>

              </div>

              <div></div>

          </div>

      </div>

    </div>

    

    

    <div id="yearsAdditional"></div>

</fieldset>

Answer 1

每次迭代时，count 在检查当前框是否大于 3后计算您将当前框添加到的年份。这意味着在大多数情况下，如果最后一个框大于 1，将创建一个附加框。要更改此year值，请在检查是否count大于 3之前添加当前值。&nbsp; &nbsp; count += current.value;&nbsp; &nbsp; if (count > 3) {&nbsp; &nbsp; &nbsp; &nbsp; remove = true;&nbsp; &nbsp; &nbsp; &nbsp; current.added = false;&nbsp; &nbsp; &nbsp; &nbsp; document.querySelector(current.parent).parentNode.removeChild(document.querySelector(current.parent));&nbsp; &nbsp; &nbsp; &nbsp; delete addresses[keys[i]];&nbsp; &nbsp; }例子：let addresses = {&nbsp; '#years_at_address_0': { /* The default one */&nbsp; &nbsp; elm: document.querySelector('#years_at_address_0'),&nbsp; &nbsp; value: 0,&nbsp; &nbsp; parent: '#previousAddress',&nbsp; &nbsp; added: false&nbsp; }};function setupAddressChecking(watch){&nbsp; &nbsp; if (addresses[watch] === undefined) {&nbsp; &nbsp; &nbsp; &nbsp; addresses[watch] = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elm: document.querySelector(watch),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; parent: '#previousAddress' + (Object.keys(addresses).length > 0 ? Object.keys(addresses).length : ''),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; added: false&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; &nbsp; let count = Object.keys(addresses).length;&nbsp; &nbsp; addresses[watch].elm.addEventListener('change', function() {&nbsp; &nbsp; &nbsp; &nbsp; if (this.value && addresses[watch].value !== this.value) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addresses[watch].value = parseInt(this.value);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (calculateYears() && !addresses[watch].added) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.querySelector('#yearsAdditional').appendChild(createNewAddress());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addresses[watch].added = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setupAddressChecking('#years_at_address_'+count);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}function calculateYears(){&nbsp; &nbsp; let count = 0;&nbsp; &nbsp; let remove = false;&nbsp; &nbsp; const keys = Object.keys(addresses);&nbsp; &nbsp; for(var i = 0; i < keys.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; let current = addresses[keys[i]];&nbsp; &nbsp; &nbsp; &nbsp; count += current.value;&nbsp; &nbsp; &nbsp; &nbsp; if (count > 3) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; remove = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; current.added = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.querySelector(current.parent).parentNode.removeChild(document.querySelector(current.parent));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; delete addresses[keys[i]];&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; if (count === 3) {&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; &nbsp; return !remove;}function createNewAddress(){&nbsp; &nbsp; let count = Object.keys(addresses).length;&nbsp; &nbsp; return createHTML({&nbsp; &nbsp; &nbsp; &nbsp; 0: { elm: createElement('div', {'id': 'previousAddress' + count}), root: null },&nbsp; &nbsp; &nbsp; &nbsp; 1: { elm: createElement('div'), root: 0 },&nbsp; &nbsp; &nbsp; &nbsp; 2: { elm: createElement('div'), root: 1},&nbsp; &nbsp; &nbsp; &nbsp; 3: { elm: createElement('label', {'for': 'previous_address', 'text': 'Address'}), root: 2},&nbsp; &nbsp; &nbsp; &nbsp; 4: { elm: createElement('div'), root: 1},&nbsp; &nbsp; &nbsp; &nbsp; 5: { elm: createElement('textarea', {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'cols': 40,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'id': 'previous_address' + count,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'name': 'finprop_previous_address',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'placeholder': 'Previous Address',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'rows': 4&nbsp; &nbsp; &nbsp; &nbsp; }), root: 4},&nbsp; &nbsp; &nbsp; &nbsp; 6: { elm: createElement('div'), root: 1},&nbsp; &nbsp; &nbsp; &nbsp; 7: { elm: createElement('div', { 'id': 'previous_row_postcode' + count}), root: 0 },&nbsp; &nbsp; &nbsp; &nbsp; 8: { elm: createElement('div'), root: 7 },&nbsp; &nbsp; &nbsp; &nbsp; 9: { elm: createElement('label', {'for': 'previous_postcode', 'text': 'Postcode *'}), root: 8 },&nbsp; &nbsp; &nbsp; &nbsp; 10: { elm: createElement('div'), root: 7 },&nbsp; &nbsp; &nbsp; &nbsp; 11: { elm: createElement('input', {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'id': 'previous_postcode' + count,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'name': 'previous_postcode',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'placeholder': 'Postcode',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'type': 'text',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'maxlength': 8&nbsp; &nbsp; &nbsp; &nbsp; }), root: 10 },&nbsp; &nbsp; &nbsp; &nbsp; 12: { elm: createElement('div'), root: 7 },&nbsp; &nbsp; &nbsp; &nbsp; 13: { elm: createElement('div', {'id': 'row_months_years_at_address' + count}), root: 0 },&nbsp; &nbsp; &nbsp; &nbsp; 14: { elm: createElement('div'), root: 13 },&nbsp; &nbsp; &nbsp; &nbsp; 15: { elm: createElement('label', {'for': 'years_at_address_' + count, 'text': 'How long at address *'}), root: 14 },&nbsp; &nbsp; &nbsp; &nbsp; 16: { elm: createElement('div'), root: 13 },&nbsp; &nbsp; &nbsp; &nbsp; 17: { elm: createElement('div'), root: 16 },&nbsp; &nbsp; &nbsp; &nbsp; 18: { elm: createElement('input', {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'id': 'years_at_address_'&nbsp; + count,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'maxlength': 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'min': 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'name': 'finprop_years_at_address',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'placeholder': 'Years',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'size': 4,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'type': 'text',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'class': 'years_at_address'&nbsp; &nbsp; &nbsp; &nbsp; }), root: 17 },&nbsp; &nbsp; &nbsp; &nbsp; 19: { elm: createElement('div'), root: 16 },&nbsp; &nbsp; &nbsp; &nbsp; 20: { elm: createElement('input', {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'id': 'months_at_address_' + count,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'maxlength': 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'min': 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'name': 'finprop_months_at_address',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'placeholder': 'Months',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'size': 4,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'type': 'text'&nbsp; &nbsp; &nbsp; &nbsp; }), root: 19 },&nbsp; &nbsp; &nbsp; &nbsp; 21: { elm: createElement('div'), root: 13 }&nbsp; &nbsp; })[0].elm;}function createHTML(elements){&nbsp; &nbsp; let keys = Object.keys(elements);&nbsp; &nbsp; for (var i = 0; i < keys.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; if (elements[keys[i]].root === null || elements[keys[i]].root === i) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; continue;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; elements[elements[keys[i]].root].elm.appendChild(elements[keys[i]].elm);&nbsp; &nbsp; }&nbsp; &nbsp; return elements;}function createElement(type, options){&nbsp; &nbsp; let elm = document.createElement(type);&nbsp; &nbsp; if (options) {&nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i < Object.keys(options).length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let key = Object.keys(options)[i];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (key === 'text') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elm.innerHTML = options[key];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; continue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elm.setAttribute(key, options[key]);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; return elm;}setupAddressChecking('#years_at_address_0');fieldset > div {&nbsp; padding: 10px;&nbsp; margin: 5px;&nbsp; background: whitesmoke;&nbsp; border: 1px solid lightgray;}<fieldset>&nbsp; &nbsp; <h3>Address Details * denotes a required field</h3>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div id="previousAddress0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><label for="previous_address0">Address</label></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><textarea cols="40" id="previous_address0" name="finprop_previous_address0" placeholder="Previous Address" rows="4"></textarea></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="previous_row_postcode0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><label for="previous_postcode0">Postcode *</label></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><input id="previous_postcode0" name="previous_postcode0" placeholder="Postcode" type="text" maxlength="8">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="row_months_years_at_address0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><label for="years_at_address_0">How long at address *</label></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><input id="years_at_address_0" maxlength="2" min="0" name="finprop_years_at_address0" placeholder="Years" size="4" type="text" class="years_at_address0"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><input id="months_at_address_0" maxlength="2" min="0" name="finprop_months_at_address0" placeholder="Months" size="4" type="text"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <div id="yearsAdditional"></div></fieldset>

Answer 2

提示（逻辑）用循环乘以 HTML。循环内是您想要的 HTML。在循环之前设置一个 if 语句。使用 进行重置el.innerHTML = ""。例子let result = document.getElementById("result");function createHTML(n, text) {&nbsp; let res = "";&nbsp; if (n < 4) {&nbsp; &nbsp; for (let i = 0; i < n; i += 1) {&nbsp; &nbsp; &nbsp; // Use your own HTML&nbsp; &nbsp; &nbsp; res += `<form id="form-${i + 2}">`;&nbsp; &nbsp; &nbsp; res += `<ul>`;&nbsp; &nbsp; &nbsp; res += `<li><textarea></textarea></li>`;&nbsp; &nbsp; &nbsp; res += `<li><span>Year</span><input class="year" type="text"></li>`;&nbsp; &nbsp; &nbsp; res += `<li><span>Month</span><input class="month" type="text"></li>`;&nbsp; &nbsp; &nbsp; res += `</ul>`;&nbsp; &nbsp; &nbsp; res += `</form>`;&nbsp; &nbsp; }&nbsp; }&nbsp; return res;}function multiply(n) {&nbsp; result.innerHTML = "";&nbsp; result.innerHTML = createHTML(n, "Heading");}form[id^="form-"] {&nbsp; border: 1px solid lightgrey;&nbsp; padding: 15px;&nbsp; background: whitesmoke;&nbsp; margin: 15px 0;}form[id^="form-"] ul {&nbsp; list-style: none;&nbsp; padding: 0;}<!-- First form --><form id="form-1">&nbsp; <ul>&nbsp; &nbsp; <li><textarea></textarea></li>&nbsp; &nbsp; <li><span>Year</span><input class="year" type="text"></li>&nbsp; &nbsp; <li><span>Month</span><input class="month" type="text"></li>&nbsp; </ul>&nbsp; <input type="text" onkeyup="multiply(this.value)"></form><div id="result"></div>