如何在 HTML 中增加一个值？答案

【问题标题】：How can I increment a value inside HTML?如何在 HTML 中增加一个值？
【发布时间】：2013-02-23 05:19:08
【问题描述】：

我对 JavaScript 完全陌生。我正在尝试在 HTML 中增加一个变量，但它不起作用。我的语法错了吗？

<script>
function rps() {
computerScore.value++;
computerScore.innerHTML = computerScore.value;
}
 </script>   
<html>
<b>computer score:</b><p id="computerScore" value="0">-</p>
<button type="button" onclick="rps()">Go</button><br>
</html>

【问题讨论】：

不要尝试access DOM elements as global variables，有一个getElementById 功能。
就算找JS解决方案，值得注意的是可以handle counters with pure CSS!

标签： javascript increment

【解决方案1】：

The best option will be to pass in an event object from the rps() method in the HtML,       like this: rps(event).
Then retrieve it from the Javascript method like this:
function rps(event) {
var computerScore = event.CurrentTarget.innerText;
computerScore++;
computerScore = number;
}

【讨论】：

您正在增加一个 innerText 值而不查看它是否是一个实际数字？
我认为 DOM 不能区分 BTW 数字和字符串。

【解决方案2】：

var elm = whatever //assuming you select your element using the DOM
// update value
elm.innerHTML = +elm.innerHTML + 1;

【讨论】：

【解决方案3】：

几个问题：

computerScore 什么都不是；你可能想要document.getElementById('computerScore')
<p> 上的 value 无效。使用 data-value 或其他东西（或

var computerScore = document.getElementById('computerScore');
function rps() {
    computerScore.dataset.value++;
    computerScore.innerHTML = computerScore.dataset.value;
}

注意dataset.value 是一个字符串，但++ 将它强制转换为一个整数。

http://jsfiddle.net/vqPKZ/

我还建议使用事件绑定而不是事件属性，例如button.addEventLister

【讨论】：

getElementById 应该在 DOMready 之后调用，即在 rps 内部
@mplungjan w3.org/TR/2011/WD-html5-20110525/…
dataset 不兼容旧版 IE，应使用 getAttribute

【解决方案4】：

几个问题：

在大多数浏览器上，您无法通过 id 获取元素，就像全局属性一样
属性并不总是元素的属性（值只是输入元素的属性）

你可以这样做：

function rps() {
   // fetch the element :
   var element = document.getElementById('computerScore'); 

   // get the attribute, parse it and increment it :
   value = parseInt(element.getAttribute('value'), 10)+1; 

   // stores the incremented value :
   element.setAttribute('value', value);

   // and change the innerHTML (conversion to string is implicit)
   element.innerHTML = value;
}

【讨论】：

【解决方案5】：

value 不是<p> 标记的有效属性。

我想你想要这样的东西：

function rps() {
    var computerScore = document.getElementById('computerScore');
    var number = computerScore.innerHTML;
    number++;
    computerScore.innerHTML = number;
}

...

<b>computer score:</b><p id="computerScore">0</p>

【讨论】：

实际上 number 在 ++ 之前是一个字符串，所以也许 number = +computerscore.innerHTML 更正确