Incorrect result of loop-CodePudding

I study Java Script and faced the problem that during looping the result of last cycle is inserted not at the last but at first.

My Code:

//Determine annuity
const annuity = document.querySelector('#annuityType');
let payment = document.querySelector('#cashFlowType');

function showAnnuity() {
  payment.innerHTML = ``;
  payment = document.querySelector('#cashFlowType');
  payment.innerHTML = `<label for="annuity">Сума ануїтету </label><input id="annuity" name="annuity" type="text"><br><br>`;
}
annuity.onclick = showAnnuity;

//Determine different cash flows
const different = document.querySelector('#differentType');

function showDifferentType() {
  payment.innerHTML = ``;
  payment = document.querySelector('#cashFlowPeriods');
  let newPayment;
  for (let i = 1; i <= document.querySelector('#period').value; i  ) {
    if (i == 1) {
      newPayment = document.querySelector('#cashFlowOne');
      newPayment.innerHTML = `<label for="diffCashFlow">Income for period <span id="periodDiff">1 </span></label><input id="diffCashFlow" name="differentCashFlow" type="text"><br><br>`;
    } else {
      let np = newPayment.cloneNode(true);
      np.id = i;
      document.querySelector('#periodDiff').innerHTML = i   " ";
      payment.append(np);
    }
  }
}
different.onclick = showDifferentType;

<div>
  <label for="period">Строк проекту (у роках)</label>
  <input id="period" name="period" type="text">
</div>
<div>
  <p>What kind of payment?</p>
  <label for="annuityType">Annuity</label>
  <input id="annuityType" name="cashFlowType" type="radio">
  <label for="differentType">Different payments</label>
  <input id="differentType" name="cashFlowType" type="radio">
</div><br>
<div id="cashFlowType"></div>
<div id="cashFlowPeriods">
  <div id="cashFlowOne"><span id="periodDiff"></span></div>
</div>

For example, when I insert 5 into input "period", the sequence of results of loop is next:

Income for period 5

Income for period 1

Income for period 2

Income for period 3

Income for period 4

I tried to researched the reason but didn't find it. I will be grateful for any help.

CodePudding user response：

You need to assign the innerHTML of the cloned node, not the original node after you cloned it.

Since IDs shouldn't be repeated, change id="periodDiff" to .

//Determine annuity
const annuity = document.querySelector('#annuityType');
let payment = document.querySelector('#cashFlowType');

function showAnnuity() {
  payment.innerHTML = ``;
  payment = document.querySelector('#cashFlowType');
  payment.innerHTML = `<label for="annuity">Сума ануїтету </label><input id="annuity" name="annuity" type="text"><br><br>`;
}
annuity.onclick = showAnnuity;

//Determine different cash flows
const different = document.querySelector('#differentType');

function showDifferentType() {
  payment.innerHTML = ``;
  payment = document.querySelector('#cashFlowPeriods');
  let newPayment;
  for (let i = 1; i <= document.querySelector('#period').value; i  ) {
    if (i == 1) {
      newPayment = document.querySelector('#cashFlowOne');
      newPayment.innerHTML = `<label for="diffCashFlow">Income for period <span >1 </span></label><input  name="differentCashFlow" type="text"><br><br>`;
    } else {
      let np = newPayment.cloneNode(true);
      np.id = i;
      np.querySelector(".periodDiff").innerHTML = i   " ";
      payment.append(np);
    }
  }
}
different.onclick = showDifferentType;

<div>
  <label for="period">Строк проекту (у роках)</label>
  <input id="period" name="period" type="text">
</div>
<div>
  <p>What kind of payment?</p>
  <label for="annuityType">Annuity</label>
  <input id="annuityType" name="cashFlowType" type="radio">
  <label for="differentType">Different payments</label>
  <input id="differentType" name="cashFlowType" type="radio">
</div><br>
<div id="cashFlowType"></div>
<div id="cashFlowPeriods">
  <div id="cashFlowOne"><span id="periodDiff"></span></div>
</div>

CodePudding user response：

you need to create elements using document.createElement instead of relying on building it using .innerHTML which can be risky if misused.

//Determine annuity
const annuity = document.querySelector('#annuityType');
let payment = document.querySelector('#cashFlowType');
function showAnnuity(){
    payment.innerHTML = ``;
    payment = document.querySelector('#cashFlowType');
    payment.innerHTML = `<label for="annuity">Сума ануїтету </label><input id="annuity" name="annuity" type="text"><br><br>`;
}
annuity.onclick = showAnnuity;

//Determine different cash flows
const different = document.querySelector('#differentType');
function showDifferentType(){
    payment.innerHTML = ``;
    payment = document.querySelector('#cashFlowPeriods');
    let newPayment;
    let html = '';
    for(let i = 1; i <= document.querySelector('#period').value; i  ){
        let label = document.createElement('label');
        let input = document.createElement('input');
        let br = document.createElement('br');
        
        input.id = `periodDiff${i}`;
        label.for = input.id;
        label.innerText = `Income for period ${i} `;
        payment.append(label);
        payment.append(input);
        payment.append(br);
        
        
        
    }
    
}
different.onclick = showDifferentType;

<div>
            <label for="period">Строк проекту (у роках)</label>
            <input id="period" name="period" type="text">
        </div>
        <div>
<p>What kind of payment?</p>
            <label for="annuityType">Annuity</label>
            <input id="annuityType" name="cashFlowType" type="radio">
            <label for="differentType">Different payments</label>
            <input id="differentType" name="cashFlowType" type="radio">
        </div><br>
        <div id="cashFlowType"></div>
        <div id="cashFlowPeriods"><div id="cashFlowOne"><span id="periodDiff"></span></div></div>
        <div>