如何使用innerHTML(或类似的)从数组中的div获取纯整数

Question

代码如下：

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

我需要把这些数字(在这种情况下是6和10(加在一起计算分数。我该如何在函数的JavaScript中做到这一点？

编辑：忘记添加的"数字"；可以是J、Q、K或A(10、10、10和11(。是否也可以快速转换？

Answer 1

猜测并填写问题中的空格，
我编写了一个添加卡片的函数
需要三个参数：

• 布尔empty：它应该查找类empty吗
• 字符串who：例如"player"
• 整数数组cardNumbers：例如，[3, 4]

它将子字符串放在所有与类和卡号文本内容匹配的div的第一个空格之前，并存储在临时数组values中。

然后，它求和，初始值0，JQK为10，A为11，其余为数字值——+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((
条件(三元(运算符
String.protype.split((
Node.textContent

我不知道empty类对选择是否重要，
也不知道卡号
如果不是：可以将所有"player"、"computer"、"player2"等相加：

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

Answer 2

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

Answer 3

请采取这种方式：

function addCardNumbers() {
const card3 = document.querySelector(".empty.player.card3");
const card4 = document.querySelector(".empty.player.card4");

return parseInt(card3.textContent) + parseInt(card4.textContent);
}

Answer 4

使用split()确保获得数字部分，然后使用parseInt(value, 10)使用base-10系统解析value。如果你不能分割和识别数字部分，你可能会得到NaN的值，比如"；小丑"；。如果您不确定数字在哪里，则需要forEach()split(' ')的结果，并使用isNan()查找数字。而且，如果你不指出10，你可以得到一个以8为基础的答案。。。

如果输入字符串以"开头；0"；(零(，假设基数为8(八进制(。。。(来源：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>