Le code est le suivant:

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

Je dois additionner les nombres (6 et 10 dans ce cas) ensemble pour un compte de score. Comment faire cela en JavaScript dans une fonction?

Edit: j'ai oublié d'ajouter que le "nombre" pouvait être J, Q, K ou A (10,10,10,11). Y aurait-il également une conversion rapide pour cela?

1
SMSO 16 oct. 2020 à 23:01

4 réponses

Meilleure réponse

Devinez et remplissez les espaces vides de votre question,
J'ai codé une fonction pour ajouter des cartes.
Il faut trois arguments:

  • Boolean empty: doit-il rechercher la classe empty?
  • String who: par exemple, "player".
  • Tableau d'entiers cardNumbers: par exemple, [3, 4].

Il prend la sous-chaîne avant le premier espace de tous les div qui correspondent au contenu textuel des classes et des numéros de carte, et stocke dans un tableau temporaire values.

Il additionne ensuite, avec la valeur initiale 0, 10 pour JQK, 11 pour A et la valeur numérique pour le reste - +String est le moyen le plus court d'obtenir un nombre à partir d'une chaîne numérique.

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 ()
Opérateur conditionnel (ternaire)
String.prototype.split ()
Node.textContent

Je ne sais pas si la classe empty est importante pour la sélection,
Ni le numéro de la carte.
Sinon: vous pouvez tout additionner "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 ()

1
iAmOren 16 oct. 2020 à 23:18

Utilisez split() pour vous assurer d'obtenir la partie numérique, puis parseInt(value, 10), pour analyser un value en utilisant un système de base 10. Si vous ne parvenez pas à diviser et à identifier la partie numérique, vous obtiendrez probablement NaN pour une valeur comme "joker". Si vous ne savez pas où se trouve le numéro, vous devrez forEach() les résultats de split(' ') et utiliser isNan() pour trouver le numéro. Et, si vous n'indiquez pas 10, vous pourriez obtenir une réponse en base 8 ...

Si la chaîne d'entrée commence par "0" (un zéro), la base est supposée être 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>
1
HoldOffHunger 16 oct. 2020 à 21:28
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;
}
1
Pedro Thomé 16 oct. 2020 à 20:15

Veuillez suivre cette voie:

function addCardNumbers() {
  const card3 = document.querySelector(".empty.player.card3");
  const card4 = document.querySelector(".empty.player.card4");
  
  return parseInt(card3.textContent) + parseInt(card4.textContent);
}
1
Everest Climber 16 oct. 2020 à 20:23