如何在javascript中通过第二次点击和第三次点击添加另一个事件？答案

【问题标题】：How to add another event with a second click and a third click in javascript?如何在javascript中通过第二次点击和第三次点击添加另一个事件？
【发布时间】：2020-06-08 20:18:02
【问题描述】：

经过几个小时的反复试验，我把我的帖子放在这里，问了一个问题，也许你们中的一个人可以帮助我。我创建了一个在单击按钮后使用“onclick”属性调用的函数。此功能更改页面选定元素的字体大小。我想添加一个不同的百分比，例如第二次点击按钮时 200%。如有任何帮助，我将不胜感激。

JS代码：

document.getElementsByClassName("increase-size").addEventListener("click", increasSize);

function increasSize() {
  var x = document.querySelectorAll("h1, h2, h3, h4, h5, h6, p, input, a");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.fontSize = "150%";
  }
}

HTML 代码：

<button type="button" class="increase-size" onclick="increasSize()"></button>

我试图用计数器解决它，但我失败了。

document.getElementsByClassName("increase-size").addEventListener("click", increaseSize);

var counter = 0;

function increaseSize() {
  counter += 1;
  var x = document.querySelector("html");
  var i;
  for (i = 0; i < x.length; i++) {
    if(counter == 1) {
      x[i].style.fontSize = "150%";
    } else if (counter == 2) {
      x[i].style.fontSize = "200%";
    }
  }
}

【问题讨论】：

每次调用您的函数时，您的计数器都会重置。在函数之外声明它并在你的函数中访问它。然后，您可以在函数结束时使用 counter++ 增加计数器。另外，请注意您的函数被错误命名为increasSize 而不是increaseSize（“大小”之前的“e”）。工作正常，但最好避免这样的拼写错误，以便在其他地方轻松引用该函数，而无需重新挖掘源代码。

标签： javascript html css

【解决方案1】：

计数器似乎是一个不错的选择。我发现这个HTML/Javascript Button Click Counter 可以确保它是一个全局变量并且它应该可以工作？

【讨论】：

【解决方案2】：

制作一些全局变量

fontSizes = ['100%', '150%', '200%'];
selectedFontSizeIndex = 0;

然后在你的点击函数中：

function increaseSize() {
  selectedFontSizeIndex++;
  selectedFontSizeIndex = selectedFontSize % fontSizes.length;
  var x = document.querySelector("html");
  var i;
  for (i = 0; i < x.length; i++) {
      x[i].style.fontSize = fontSizes[selectedFontSizeIndex];
  }
}

这将继续循环通过您的选项。让我知道是否有任何代码行需要更多解释

【讨论】：

抱歉，我收到了这条消息：ReferenceError: selectedFontSize is not defined

【解决方案3】：

您的代码有几个问题：

increase-size 应该是 id 而不是 class 并称为 document.getElementById("increase-size")。否则，您可以将其用作 document.getElementsByClassName("increase-size")[0]，因为它会返回一个元素列表。
click 函数只能传递 function 名称，否则会被调用两次：

<button type="button" class="increase-size" onclick="increasSize"></button>

counter 应该是一个全局变量，incremented 在每个调用中。每次使用函数时，这里的使用方式都设置为零。
您不需要for loop。
最好不要在函数名中出现拼写错误：将其重命名为 increaseSize。
您只需在html 或JavaScript 中设置一次监听器。最好留下js 部分。

最终解决方案如下：

document.getElementById("increase-size").addEventListener("click", increaseSize);
let counter = 0;
function increaseSize() {
  console.log(counter);
  counter++;
  var x = document.querySelector("html");
  if(counter == 1) {
      x.style.fontSize = "150%";
  } else if (counter == 2) {
      x.style.fontSize = "200%";
  }
}

<html>
<button type="button" id="increase-size">Increase</button>
<h1>Hello</h1>
<h2>World</h2>
</html>

【讨论】：

我怎么会这么错？ TypeError: document.getElementById(...) is null
这些并不是所有的问题，而是一般的不良做法。如果您想像这样使用它，请确保将类更改为 id，并将脚本放在正文的末尾。
我还有另一个错误导致该功能无法正常工作。 ReferenceError: 在初始化之前不能访问词法声明`counter'
不幸的是，它对我不起作用。可能是因为那些错误。不过，感谢这个答案，我学到了一些关于 js 的新知识。

【解决方案4】：

您可以通过使用布尔值进行简单切换来实现这一点，该布尔值将在单击按钮时增加和减小字体大小。这是它的工作原理

    var swit=true
      document.getElementById("increase-size").addEventListener(click, ()=>{
  function increasSize() {
  //150%
  if(swit){
  var x = document.querySelectorAll("h1, h2, h3, h4, h5, h6, p, input, a");
    var i;
    for (i = 0; i < x.length; i++) {
      x[i].style.fontSize = "150%";
    }
    swit=false
    return
  }
  // 200%
  if (!swit){

  var x = document.querySelectorAll("h1, h2, h3, h4, h5, h6, p, input, a");
    var i;
    for (i = 0; i < x.length; i++) {
      x[i].style.fontSize = "200%";
    }
    swit=true
    return
  }
  }
   increasSize() 

  });

【讨论】：