Question

我真的没有主意，我已经尝试了一切可以尝试的方法，但是无法使这个简单的事情起作用。

JavaScript

var gurus = document.getElementById('clicks')
var x = gurus.value+1
function guru() { 
  document.getElementById('clicks').innerHTML = x
}

HTML

<p id='clicks'>0</p>
<button onclick='guru()'>Click</button>

我是用codepen（link）制作的。

Answer 1

首先，您需要innerHTML而不是值，因为p标签没有values属性。其次，每次单击都需要获取p标记的内容，因此请将其放在函数中。使用parseInt将字符串转换为数字

var gurus = document.getElementById('clicks')


function guru() {
  var x = parseInt(gurus.innerHTML, 10) + 1
  document.getElementById('clicks').innerHTML = x
}

<p id='clicks'>0</p>
<button onclick='guru()'>Click</button>

Answer 2

以下是实现您尝试完成的相同操作的更清晰方法。下面的代码使用addEventListener并从内联HTML中删除JavaScript函数调用（这不是最佳实践）。确保使用parseInt来转换innerHTML，因为这是您发布的代码的原始问题：

document.addEventListener('DOMContentLoaded', () => {
  const p = document.querySelector('#clicks');
  const b = document.querySelector('#btn');

  p.append(document.createTextNode("0"));

  b.addEventListener('click', function() {
    p.innerHTML = parseInt(p.innerHTML) + 1;
  });
});

<p id='clicks'></p>
<button id="btn">Click</button>

Answer 3

答案也非常简单！您正在将<p>元素视为输入字段。您需要.innerHTML而不是.value。然后，您需要将该内部HTML转换为数字（使用Number()）。最后，您应该移动增量语句：

var x = gurus.value + 1

插入函数，否则x只是一个常数。这是一个有效的代码段：

  var gurus = document.getElementById('clicks');

function guru() {
  var x = Number(gurus.innerHTML) + 1;
  document.getElementById('clicks').innerHTML = x;
}

<p id='clicks'>0</p>
<button onclick='guru()'>Click</button>

试图制作一个超级简单的答题器游戏，但我得到的是NaN而不是数字

3 个答案: