How to merge list of nodes values into one array in Javascript?

Question

I have a problem with merging list of nodes values into one array. I would like to have one array of values and update it when buttons are clicked.

I used method forEach and then function where I nested Array.from() method. I obtained a few arrays which amount is depended how many nodes I have.

html code:

<li>
  <button class="add">+</button>
  <span class="amount" id = "amount0">0</span>
  <button class="substract">-</button>
</li>
<li>
  <button class="add">+</button>
  <span class="amount" id = "amount1">0</span>
  <button class="substract">-</button>
</li>

and so on...

JS code:

function addAmount(el) {
  let amountElement, adjustAmount;

  if (el.classList.contains("add")) {
    adjustAmount = 1;
    amountElement = el.nextElementSibling;
  } else {
    adjustAmount = -1;
    amountElement = el.previousElementSibling;
  }

  if (amountElement.innerText >= 0) {
    amountElement.innerText =
      parseInt(amountElement.innerText) + adjustAmount;
  } else {
    amountElement.innerText = 0;
  }
}

function ordered() {
    const amount = document.querySelectorAll(".amount");
    amount.forEach(function(order) {
      let myArrays = Array.from(order.innerText);
      console.table(newArrays);
      console.log(order);
    });
  }
document.addEventListener("click", ordered);
document.addEventListener('click', e => {
  if (e.target.tagName == "BUTTON") {
    addAmount(e.target);
  } else {
    console.log(e.target.tagName);
  }
});

This code return in console two nodes

<span class="amount" id = "amount">0</span>

and two arrays:

["0"]

which updating. However if number of value is more than 10 the arrays start to divide number of tens and number of unities into two items in array, like:

["1","0"]

but I want to get one item ["10"]. Values of nodes are updating properly.

function addAmount(el) {
  let amountElement, adjustAmount;

  if (el.classList.contains("add")) {
    adjustAmount = 1;
    amountElement = el.nextElementSibling;
  } else {
    adjustAmount = -1;
    amountElement = el.previousElementSibling;
  }

  if (amountElement.innerText >= 0) {
    amountElement.innerText =
      parseInt(amountElement.innerText) + adjustAmount;
  } else {
    amountElement.innerText = 0;
  }
}

function ordered() {
    const amount = document.querySelectorAll(".amount");
    amount.forEach(function(order) {
      let myArray = Array.from(order.innerText);
      console.log(myArray);
      console.log(order);
    });
  }
document.addEventListener("click", ordered);
document.addEventListener('click', e => {
  if (e.target.tagName == "BUTTON") {
    addAmount(e.target);
  } else {
    console.log(e.target.tagName);
  }
});

<li>
  <button class="add">+</button>
  <span class="amount" id = "amount0">0</span>
  <button class="substract">-</button>
</li>
<li>
  <button class="add">+</button>
  <span class="amount" id = "amount0">0</span>
  <button class="substract">-</button>
</li>

can you make a snippet with your code? it is the menu with <>. — Nina Scholz
– Nina Scholz, Commented May 23, 2019 at 11:18

Syed mohamed aladeen · Accepted Answer · 2019-05-23 11:24:15Z

1

Just push the values in a array and join them. Try like this

function addAmount(el) {
  let amountElement, adjustAmount;

  if (el.classList.contains("add")) {
    adjustAmount = 1;
    amountElement = el.nextElementSibling;
  } else {
    adjustAmount = -1;
    amountElement = el.previousElementSibling;
  }

  if (amountElement.innerText >= 0) {
    amountElement.innerText =
      parseInt(amountElement.innerText) + adjustAmount;
  } else {
    amountElement.innerText = 0;
  }
}

function ordered() {
    const amount = document.querySelectorAll(".amount");
    var unit = [];
    amount.forEach(function(order) {
      let myArrays = Array.from(order.innerText);
      unit.push(myArrays);
      console.log(order);
    });
    console.log(unit.join(''));
  }

document.addEventListener('click', e => {
  if (e.target.tagName == "BUTTON") {
    addAmount(e.target);
  } else {
    console.log(e.target.tagName);
  }
});
document.addEventListener("click", ordered);

<li>
  <button class="add">+</button>
  <span class="amount" id = "amount0">0</span>
  <button class="substract">-</button>
</li>
<li>
  <button class="add">+</button>
  <span class="amount" id = "amount1">0</span>
  <button class="substract">-</button>
</li>

answered May 23, 2019 at 11:24

Syed mohamed aladeen

6,8134 gold badges36 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ArcMech Over a year ago

It's not quite I ask for. The problem is when one value is reaching 10 it started to behave like an array get two items. I need to get one item with value 10.

Collectives™ on Stack Overflow

How to merge list of nodes values into one array in Javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related