Question

此脚本是专门设计的，当您按下按钮时它将显示0，再次按下按钮时它将显示10，并在每次按下

时保持加10。

按钮，例如0、10、20、30、40等...我该怎么做？我尝试了许多方法，但无法生成类似这样的东西。

document.querySelector('#add-by-ten').addEventListener('click',addByTen);

function addByTen(){
/*???*/
document.querySelector('#result').innerHTML = ?;
}

<button id='add-by-ten'>Add by ten</button>
<p id='result'></p>

Answer 1

var resultElement = document.getElementById('result')

function addByTen(){
   var value = parseInt(resultElement.innerHTML, 10);

   if (!Number.isInteger(value)) {
      resultElement.innerHTML = 0;
   } else {
      resultElement.innerHTML = value + 10;
   }
}

document.querySelector('#add-by-ten').addEventListener('click',addByTen);

Answer 2

在外部作用域中使用var counter = 0;，然后在单击按钮时添加10。

document.querySelector('#add-by-ten').addEventListener('click',addByTen);
var counter = 0;

window.onload  = function init(){
  document.querySelector('#result').innerHTML = counter;
}
function addByTen(){
   counter+=10;
   document.querySelector('#result').innerHTML = counter;
}

<button id='add-by-ten'>Add by ten</button>
<p id='result'></p>

Answer 3

设置一个全局变量，让number = 0;

将inner.Text设置为该变量。

然后使用plusTen函数（）{number =数字+10}

Answer 4

您差不多了！

要实现这一目标，需要四个步骤：

使用任务选择器从标签中检索当前值。
将检索到的innerHTML设置为数字。
将此数字增加10。
将新号码设置为查询选择器的innerHTML。

这是代码的工作副本：

document.querySelector('#add-by-ten').addEventListener('click',addByTen);

function addByTen(){
  var currentValue = document.querySelector('#result');
  currentValue.innerHTML = Number(currentValue.innerHTML) + 10;
}

<button id='add-by-ten'>Add by ten</button>
<p id='result'>0</p>

有几种方法可以实现您的工作，其中可能涉及存储全局变量以保持计数；或使用DOM操作（如您的原始尝试）。

从0开始，一直加10

4 个答案: