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?

consider the mv* patterns that exist. don't use the dom as state — Daniel A. White, Oct 16 '20 at 20:02
Does this answer your question? [How to extract number from a string in javascript](https://stackoverflow.com/questions/7033334/how-to-extract-number-from-a-string-in-javascript) — Heretic Monkey, Oct 16 '20 at 20:55

score 1 · Answer 1 · answered Oct 16 '20 at 20:15

function addCardNumbers() {
  const card3 = document.querySelector(".empty.player.card3");
  const card4 = document.querySelector(".empty.player.card4");
  
  // Remove every non-digit character from the text
  // and convert them to numbers
  const card3Number = Number(card3.textContent.replace(/\D/g, ""));
  const card4Number = Number(card4.textContent.replace(/\D/g, ""));

  return card3Number + card4Number;
}

score 1 · Answer 2 · answered Oct 16 '20 at 20:23

1

Please take this way:

function addCardNumbers() {
  const card3 = document.querySelector(".empty.player.card3");
  const card4 = document.querySelector(".empty.player.card4");
  
  return parseInt(card3.textContent) + parseInt(card4.textContent);
}

answered Oct 16 '20 at 20:23

Everest Climber

1,203
1
9
15

score 1 · Answer 3 · answered Oct 16 '20 at 21:28

Use split() to make sure you get the numeric part, then parseInt(value, 10), to parse a value using a base-10 system. If you fail to split and identify the numeric part, you'll possibly get NaN for a value like "joker". If you're not sure where the number is, you'll need to forEach() the results of split(' ') and use isNan() to find the number. And, if you don't indicate 10, you could get a base-8 answer...

If the input string begins with "0" (a zero), radix is assumed to be 8 (octal)... (Source: Developer.Mozilla.org)

console.log(parseInt(document.getElementById("6ofspades").innerHTML.split(' ')[0], 10));
console.log(parseInt(document.getElementById("10ofhearts").innerHTML.split(' ')[0], 10));

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

iAmOren · Accepted Answer · 2020-10-16T23:18:54.393

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()

Thanks a lot for taking the time Oren. The second function was just what I needed. Class Empty is needed, just haven't renamed it yet tbh! — boscode, Oct 17 '20 at 10:34

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

4 Answers4