如何從HTML中的元素內部獲取值並將其設置為JS中的變量

Question

在這里，我有一個要素。

<span id="coins">50</span>

我想從中取出50個並將其設置為x（類似這樣）

var x = ("#coins")

但我不確定該怎么做...

Answer 1

我將假設您希望x以數字結尾，因此您可以這樣做：

var x = +(document.getElementById("coins").innerHTML)

這將獲取元素的innerHTML，然后使用unary +將其轉換為數字。

這也適用：

var x = parseFloat((document.getElementById("coins").innerHTML));

var x = parseInt((document.getElementById("coins").innerHTML), 10);

也有一個innerText以及.textContent屬性，但是它們沒有這么廣泛的支持。

Answer 2

您可以像這樣訪問元素的innerHTML ：

var spanEl = document.getElementById('coins');
var x = spanEl.innerHTML;

如果要將其強制轉換為int ，則可以使用parseInt ：

var spanEl = document.getElementById('coins');
var x = parseInt(spanEl.innerHTML, 10);

請注意， 10是parseInt函數中的第二個參數。 這表示您要解析以10為底的數字。

Answer 3

無法在注釋中正確設置樣式，但這是我建議做的事情：

var x = parseInt(document.getElementById("coins").childNodes[0].nodeValue); 

x = isNaN(x) ? 0 : x;