如何在HTML中增加一个值？

Question

如何在HTML中增加一个值？

7

我完全不懂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>

- pasha_codes

不要将DOM元素作为全局变量访问，可以使用getElementById函数来实现。 - Bergi

1

即使您正在寻找JS解决方案，值得注意的是您可以使用纯CSS来处理计数器！（https://www.w3schools.com/cssref/pr_gen_counter-increment.asp） - Frank Zalkow

5个回答

1

几个问题：

在大多数浏览器中，您不能像全局属性一样通过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;
}

- Denys Séguret

0

一些问题：

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.addEventListener。

- Explosion Pills

getElementById 应该在 DOMready 后调用，即在 rps 内部调用。 - Bergi

@mplungjan http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes - Explosion Pills

dataset 不符合旧版 IE 标准，应该使用 getAttribute。 - vsync

0

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;
}

- Misterwyz

你正在增加一个innerText值，而没有检查它是否是一个实际的数字？ - Adam

我认为DOM无法区分数字和字符串。 - Misterwyz

-3

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

- vsync

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam Plocher · Accepted Answer

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>