使用javascript函数更改span标记内的数字时遇到问题

Question

编辑：谢谢！它现在完美运作。我非常感谢快速反应！

相关的jfiddle here。

我有一个跨度列表，每个跨度都有唯一的ID，我希望能够使用href或输入进行修改（两者都可以）。我现在只是在努力让它发挥作用，但它似乎没有任何进展。相关的html是：

    <ul>
    <li>STR <span id="str">0</span></li>
<br>
<input type='button' onClick="abilUp()" value='increase by 1' />

相关的javascript是：

    var statVal = 1;
function abilUp() {
    var aV = +document.getElementById('str');
    aV = aV + statVal;
    console.log("str ="+ aV);
}

按钮有效，并且该功能在控制台中返回增加，但跨度内的实际值不会改变。我很确定它没有将0识别为数字，所以我尝试使用以下内容：

+document.getElementById('str');
Number(document.getElementById('str'));
parseInt(document.getElementById('str'), 10);

我也尝试过使用带有innerHTML的变量，但它无法正常工作。我知道这是可能的，我只是不知道我做错了什么。提前感谢您提供任何帮助。

（编辑以修复parseInt示例）

Answer 1

问题是你在变量element中得到aV而不是值。因此，您必须获取该元素中的内容并对其执行操作。

试试这个

var statVal = 1;
function abilUp() {
    var aV = document.getElementById('str');
    aV.textContent = (+aV.textContent) + statVal;
    console.log("str ="+ aV.textContent);
}

Answer 2

您需要使用innerHTML获取div的实际文本：

var statVal = 1;
function abilUp() {
    var aV = +document.getElementById('str').innerHTML;
    aV = aV + statVal;
    document.getElementById('str').innerHTML= aV;
}

<强> jsFiddle example

Answer 3

function abilUp() {
    var aV = document.getElementById('str').innerHTML;
    var aV = parseInt(aV);
    document.getElementById('str').innerHTML = aV+1;
}

使用innerHTML简单获取数字， 然后使用parseInt从字符串更改为数字 并返回带有数字的内部HTML。

这里是小提琴手 {{3P>