获取 html 标签文本，转换为数字，递增，然后用结果更新标签文本

Question

我的网页上有一个标签，

<label id="testLabelq" class="no_border" style="position: relative; top:-50px; margin: 0 auto; padding: 0px; width:20%; height: 25px;">1</label>

我想让数字（最初是 1）加一，然后将标签的内容设置为新值，按下此按钮。

<button id="testButtonplus" class="item_button" type="Button" style="position: relative; left:-40%; margin: 0 auto; padding: 0px; width:20%; height: 50px;" onclick="add()">+</button>

我的 JavaScript 函数看起来像这样

        function add()
    {
            var quantity_temp = document.getElementById("testLabelq").innerText; 

            var qantity_int = parseInt(quantity_temp, 10) + 1;

            document.getElementById("testLabelq").innerHTML = "Test " + quantity_int.toString();
    }

当我按下按钮时标签的值没有改变...

如果我更改行

document.getElementById("testLabelq").innerHTML = "Test " + quantity_int.toString();

到

document.getElementById("testLabelq").innerHTML = "Test " + quantity_temp;

然后标签文本会在每次按下按钮时更新一个额外的 "Test"。

因此我认为我的数字转换一定有问题，但我看不出在哪里。

谢谢，格雷厄姆

Answer 1

函数中有语法错误 (var qantity_int =) :

function add() {
    var quantity_temp = document.getElementById("testLabelq").innerText;
    var quantity_int = parseInt(quantity_temp, 10) + 1;
    document.getElementById("testLabelq").innerHTML = quantity_int.toString();
}

Answer 2

您的代码在稍微简化后似乎可以正常工作：

function add() {
  var quantity_temp = document.getElementById("testLabelq").innerText;
  var quantity_int = parseInt(quantity_temp, 10) + 1;
  document.getElementById("testLabelq").innerHTML = quantity_int.toString();
}

<label id="testLabelq">1</label>
<button id="testButtonplus" class="item_button" type="Button" onclick="add()">+</button>

唯一的修正是打字错误 qantity_int 应该是 quantity_int

获取 html 标签文本，转换为数字，递增，然后用结果更新标签文本

getting html label text, converting to number, increment and then update label text with result

html

javascript

label

increment