javascript - JS 函数调用显示奇怪的文本并且不能多次工作

Question

我有一个问题，当我运行我的函数“addMoney(amount)”(如下所示)时，它起作用并显示以下内容:100[object HTMLButtonElement]

我的问题是，有没有办法在调用函数时删除 [object HTMLButtonElement]，同时保留 MoneyAmount 中的数字？另外，有没有办法多次调用该函数并相应地添加资金？由于它仅在我第一次调用它时起作用，因此使用相同或不同金额的 MoneyAmount 多次调用它时，显示的金额不会多于或不少于第一次显示的内容。

我的 HTML:

<li class="item_shown" id="money">Shrill:  <button class="moneyButton" id="moneyAmount">0</button></li>

在 HTML 中调用函数:

<a class="button" onclick="javascript:addMoney('100');">Add 100 Money</a>

我的 JS 函数:

function addMoney(amount) {
document.getElementById('moneyAmount')
var newBalance = amount + moneyAmount;
document.getElementById('moneyAmount').innerHTML = newBalance;
} 

Answer 1

元素内的文本被视为文本节点，并且由于按钮节点没有其他子节点，因此是按钮节点的第一个子节点。文本节点的值(在本例中为“0”)是其nodeValue 属性的值。为 nodeValue 分配新值将更改显示的文本。因此，在您的情况下，以下代码应该有效:

function addMoney(amount) {
  var node = document.getElementById('moneyAmount');
  var textNode = node.childNodes[0];
  var moneyAmount = parseInt(textNode.nodeValue, 10);
  textNode.nodeValue = amount + moneyAmount;}