Question

我有一个基本的点击计数器（desc）可以正常工作，但是一旦它达到X，你怎么做它做什么？

JS：

var clicks = 20;
 function clicker() {
   clicks--;
    document.getElementById("clicks").innerHTML = clicks;
}

HTML：

<button type="button" onClick="clicker()">Click me</button>
    <p>Clicks: <a id="clicks">20</a></p>

我在函数内部和外部尝试了if语句，但它不起作用：

if (clicks == 10) {
    document.getElementById("p").innerHTML = "finished";
}

Answer 1

您正在尝试选择ID为p的元素，该元素在您提供给我们的代码中不存在。我相信您尝试选择p元素，在这种情况下，您可以使用document.querySelector('p')或document.getElementsByTagName('p')[0]。

请注意，这两个元素都会选择文档中的第一个p元素，这可能不是您想要的。您必须拥有更具体的标识符，例如类或ID。

请注意，使用document.querySelector('...')，您可以使用CSS样式选择器，因此请选择#id的ID。

var clicks = 20;

function clicker() {
  clicks--;
  document.getElementById("clicks").innerHTML = clicks;

  if (clicks == 10) {
    document.querySelector("p").innerHTML = "finished";
  }
}

<button type="button" onClick="clicker()">Click me</button>
<p>
  Clicks: <a id="clicks">20</a>
</p>

Answer 2

您的元素ID是“p”吗？我认为如果你用ASCENDING方法做到这一点会更容易。

Answer 3

var clicks = 20;
 function clicker() {
   clicks--;
    document.getElementById("clicks").innerHTML = clicks;
    if(clicks == 0) {
        //Do your stuff
    }
    else
        return false;
}

HTML

<button type="button" onClick="javascript:return clicker();">Click me</button>
    <p>Clicks: <a id="clicks">20</a></p>

Answer 4

我会建议一个钩子。将函数传递给每次调用的clicker，它将执行逻辑

var clicks = 20;

function clicker(doSomething) {
  clicks--;
  document.getElementById("clicks").innerHTML = clicks;
  if(doSomething !== undefined) doSomething()
}

function doSomething() {
  if (clicks == 10) {
    document.getElementById("p").innerHTML = "finished";
  }
}

<button type="button" onClick="clicker(doSomething)">Click me</button>
<p id="p">Clicks: <a id="clicks">20</a>
</p>

点击计数达到X后执行一些操作

4 个答案: