使用 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

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

试试这个

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。

这里是提琴手 http://jsfiddle.net/PjG84/8/