AnswerBun.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!

Related Questions

Using user input to retrieve data

1  Asked on January 1, 2022 by phast

     

What does “Cch” mean in StringCchPrint*?

1  Asked on January 1, 2022 by ari-sweedler

 

How to encode base_64 without slash in PHP?

1  Asked on January 1, 2022 by burhan

     

Issue with event listener and value not updating

1  Asked on January 1, 2022 by penone

 

Cannot package signed Java security providers with JMOD

1  Asked on January 1, 2022 by travesty

   

Unity and C# DebugLog Not Printing Everything

1  Asked on January 1, 2022 by a4treok

   

activate virtualenv in git bash using pycharm on windows

4  Asked on January 1, 2022 by mostafa-ghadimi

       

passing data from javascript variable to an ejs variable

1  Asked on January 1, 2022 by kevin-terblanche

     

How to scrape all topics from twitter

2  Asked on January 1, 2022 by suraj-subramanian

         

Using lodash to modify object

2  Asked on January 1, 2022 by prova12

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir