javascript - 如何在 HTML 中增加一个值？

Question

我对 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>

score 14 · 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>

score 1 · Accepted Answer

几个问题：

在大多数浏览器上，您不能通过 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;
}

score 0 · Accepted Answer

几个问题：

computerScore没什么; 你可能想要document.getElementById('computerScore')
value在 a<p>上无效。使用data-valueor 代替（或

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

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

http://jsfiddle.net/vqPKZ/

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

score 0 · Accepted Answer

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

score -3 · Accepted Answer

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

javascript - 如何在 HTML 中增加一个值？

5 回答 5

Related

Reference