📌  相关文章
📜  div点击3次后会输出多少个“a”字符? (1)

📅  最后修改于: 2023-12-03 15:00:26.182000             🧑  作者: Mango

按钮点击计数器

本程序可以模拟一个计数器，每当点击按钮时计数器会加一。在点击3次按钮后，程序会输出一串字符。下面是详细介绍：

程序实现

本程序采用JavaScript编写，主要包括两个部分：HTML页面和JavaScript脚本。

HTML页面包含一个按钮和一个空的

元素，在点击按钮时会触发JavaScript脚本。

JavaScript脚本实现了程序的核心逻辑：定义了一个计数器变量并将其初始化为0，当点击按钮时计数器自增1，当计数器等于3时，将“a”字符填充进

元素中。

<!DOCTYPE html>
<html>
  <head>
    <title>按钮点击计数器</title>
  </head>
  <body>
    <button id="counter">点击我</button>
    <div id="output"></div>
    <script>
      // 定义计数器变量
      let count = 0;

      // 获取DOM元素
      const button = document.getElementById('counter');
      const output = document.getElementById('output');

      // 监听按钮点击事件
      button.addEventListener('click', () => {
        // 计数器自增1
        count++;

        // 如果计数器等于3，输出"a"到<div>元素
        if (count === 3) {
          output.innerText = "aaa";
        }
      });
    </script>
  </body>
</html>
运行程序

在浏览器中打开该页面，在点击按钮3次后，

元素中会显示"aaa"。

进一步思考
  1. 如果要让
    元素中输出更多个“a”字符，如何修改程序？

可以将字符串修改为更长的字符串，比如“aaaaaa”。

  1. 如果将计数器初始化为1，会有什么不同？

计数器初始值为1时，需点击4次按钮才能够使计数器的值达到3，

元素中将输出字符串“aaa”。

  1. 如何保证在点击到第三次后，再次点击按钮时能够重新计数？

可以在输出字符串“aaa”后将计数器重置为0。

if (count === 3) {
  output.innerText = "aaa";
  count = 0; // 重置计数器
}