How would I use innerHTML (or similar) to obtain purely integers from divs in an array?

Question

Code is as follows:

<div class="empty player card3">6 Spades</div>
<div class="empty player card4">10 Hearts</div>

I need to add the numbers (6 & 10 in this case) together for a score count. How would I do this in JavaScript in a function?

Edit: forgot to add that the "number" could be J, Q, K, or A (10,10,10,11). Would there be a quick convert for this as well?

Answer 1

Guessing and filling-in the blanks from your question,
I've coded a function to add cards.
It takes three arguments:

• Boolean empty: should it look for class empty?
• String who: for example, "player".
• Array of Integers cardNumbers: for example, [3, 4].

It takes the substring before the first space of all the div's that match the classes and card numbers' text content, and stores in a temporary array values.

It then sums, with initial value 0, 10 for JQK, 11 for A, and number value for the rest - +String is the shortest way to get a Number out of a number string.

function cardsValue(empty, who, cardNumbers) {
  var values = cardNumbers.map(
    currentValue => document.querySelector(
      (empty?".empty":"") +
      ("." + who) +
      (".card" + currentValue)
    )
    .textContent
    .split(" ")
    [0]
  );
  return (
    values.reduce(
      (accumulator, currentValue) => {
        accumulator +=
        ["J", "Q", "K"].includes(currentValue)?10:
        currentValue == "A"?11:
        +currentValue;
        return accumulator;
      }, 0
    )
  );
}

console.log("Player: "+cardsValue(true, "player", [3, 4]));
console.log("Computer: "+cardsValue(true, "computer", [9, 10,11]));

<div class="empty player card3">6 Spades</div>
<div class="empty player card4">10 Hearts</div>
<br>
<div class="empty computer card9">K Diamonds</div>
<div class="empty computer card10">A Clubs</div>
<div class="empty computer card11">7 Diamonds</div>

Array.prototype.map()
Array.prototype.reduce()
Conditional (ternary) operator
String.prototype.split()
Node.textContent

I don't know if class empty is important for selection,
Nor the card number.
If not: you can sum all "player", "computer", "player2", etc.:

function cardsValue(who) {
  var divs = Array.from(document.querySelectorAll("." + who));
  var values = divs.map(
    currentValue =>
    currentValue
    .textContent
    .split(" ")
    [0]
  );
  return (
    values.reduce(
      (accumulator, currentValue) => {
        accumulator +=
        ["J", "Q", "K"].includes(currentValue)?10:
        currentValue == "A"?11:
        +currentValue;
        return accumulator;
      }, 0
    )
  );
}

console.log("Player: "+cardsValue("player"));
console.log("Computer: "+cardsValue("computer"));

<div class="empty player card3">6 Spades</div>
<div class="empty player card4">10 Hearts</div>
<br>
<div class="empty computer card9">K Diamonds</div>
<div class="empty computer card10">A Clubs</div>
<div class="empty computer card11">7 Diamonds</div>

Array.from()