CODEWITHSUNDEEP
javascript
Rob Mc
Rob Mc

Reputation: 13

How do you increase a number when a new row is added?

My Problem

I would like some help understanding how to increase the label const label = document.createElement("label"), which would start at 1 and increase with every new row added.

This section of code is the addEventListener for the button

document.querySelector('button').addEventListener('click', renderRow())

This section of code renders the row when the button is clicked

function renderRow() {
  
  const row = document.createElement('div');

  const label = document.createElement("label");
  
  const input1 = document.createElement("input");
  input1.type = "number";
    
  const input2 = document.createElement("input");
  input2.type = "number";
  
  const result = document.createElement("div");

  row.append(label, input1, input2, result);

Upvotes: 0

Views: 89

Answers (1)

Mauro Aguilar
Mauro Aguilar

Reputation: 1338

There are many ways you can achieve this. Here is a small, modified excerpt of your code as an example with some explanation comments.

The basic idea of this approach is to render elements based on a dynamic state which in this case is just a counter that controls how many children are rendered at a given moment. The add and delete buttons control this counter and call the render function to reflect the updated state of the counter in the view.

// define a static starting number if needed
const startingNum = 5;

// define dynamic counter
let counter = 0;

// get ref of parent rows container
const divBox1 = document.querySelector(".fifth-row");

// increase counter when add button is clicked and render rows
document.querySelector('button')
  .addEventListener('click', function () {
    counter += 1;
    renderRows();
  });

// decrease counter when any of the delete buttons is clicked and render rows again
divBox1
  .addEventListener('click', function (e) {
    if (e.target.classList.contains('deleteBtn')) {
      counter -= 1;
      renderRows();
    }
  });

// render rows based on the state of the counter
function renderRows() {
  // calc total number of rows to render based on current counter value
  const total = (startingNum + counter) - startingNum;
  // clear container by removing children
  divBox1.innerHTML = '';

  // render rows
  for (let i = 0; i < total; i++) {
    addRow(startingNum + i);
  }
}

function addRow(rowNumber) {
  // create a container for each row
  const rowContainer = document.createElement('div');
  rowContainer.classList.add('row-container');
  divBox1.appendChild(rowContainer);

  const labelBox = document.createElement("LABEL");
  rowContainer.appendChild(labelBox);
  labelBox.classList.add('labelBet');
  
  // set the text content including the dynamic row number
  labelBox.textContent = "Bet " + rowNumber;

  const inputBox = document.createElement("INPUT");
  rowContainer.appendChild(inputBox);
  inputBox.classList.add('oddsEntry');

  const divBox2 = document.createElement("DIV");
  rowContainer.appendChild(divBox2);
  divBox2.classList.add('stakePreTotal');

  const divBox3 = document.createElement("DIV");
  rowContainer.appendChild(divBox3);
  divBox3.classList.add('liaDiv');

  const btnDel = document.createElement("BUTTON");
  btnDel.innerText = 'Delete';
  rowContainer.appendChild(btnDel);
  btnDel.classList.add('deleteBtn');
}
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0; 
}

button {
  padding: .3rem .5rem;
}

.rows > div.fifth-row > div {
   display: flex;
}
<div class="rows">
  <div class="fifth-row"></div>
</div>

<button type="button">add row</button>

Upvotes: 2

Related Questions