单击按钮更改计数器的值

Question

找了一段时间，发现可以从doGet发送一个值给htmlcreated。

但我想做一些不同的事情，我想要一个按钮和标签，每次我按下该按钮时它都会增加标签。

类似于按下该按钮的计数器。

我已经有了呈现按钮和标签的 HTML 它非常简单

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <?!= include('stylesheet'); ?>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LDP Test</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <script>
     function incrementCounter() {}
  </script>
</head>

<body>
  <label> Counter 0 </label>
  <button onClick="incrementCounter"> Increment counter</button>
</body>

</html>

我想 link 这个标签的 incrementCounter 函数，或者任何可以完成的 html 元素，只要按下按钮，它就会递增并呈现在屏幕上有人可以指导我完成这个吗？

Answer 1

您的代码中有一些错误。首先它应该是 onclick 而不是 onClick 并且该函数应该被称为 onclick="incrementCounter()".

其次，标签应与输入、文本区域或 select 元素一起使用。

现在进入代码

HTML

<p>Count: <span id="counter">0<span></p>

<button onclick="incrementCounter()">Increment Counter</button>

JS

function incrementCounter() {
   const counterElem = document.querySelector('#counter'),
         count = +counterElem.innerHTML;
   counterElem.innerHTML = count+1;
}

代码内部发生的事情是我 selecting 计数将显示的目标元素。然后我得到它的 innerHTML 的值，并在 counterElem.innerHTML 之前使用 + 将它解析为一个整数。然后我将值加 1 并将其设置为 innerHTML

Answer 2

像下面的片段一样尝试

function incrementCounter() {
  document.querySelector('#counter').innerHTML++;
}

<label>Count: <span id="counter">0</span></label>
<button onclick="incrementCounter()">Increment Counter</button>

单击按钮更改计数器的值

Changing counter's value on button click

html

button

google-sheets

google-apps-script