TransWikia.com

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

Stack Overflow Asked by SMSO on November 30, 2020

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?

4 Answers

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

Correct answer by iAmOren on November 30, 2020

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>

Answered by HoldOffHunger on November 30, 2020

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 by Everest Climber on November 30, 2020

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;
}

Answered by Pedro Thomé on November 30, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP