Html Question posted in
Some basic documentation can be found here.

Html – Simple Counter as a webapp with increase and decrease buttons

I’ve tried to create a simple counter with increase in decrease buttons, but I cannot go any further.

The code I’ve been stuck with is:

for code.gs

let count = 0;
const counter = document.getElementById("count");

function onDec() {
  count = count-1;
  counter.textContent = count;
}

function onInc() {
  count = count+1;
  counter.textContent = count;
}

and for index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type"
        content="text/html; charset=UTF-8" />
  </head>
  <body>
    <div class="container">
    <h2><span id="count">0</span></h2>
    <button id="decBtn" class="button" onclick="onDec()">-</button>
    <button id="incBtn" class="button" onclick="onInc()">+</button>
    </div>
  </body>
</html>

I’ve realised recently what is missing, is doGet() function in code.gs. But so far adding this didn’t solve the problem. I know I’m missing something simple and important, but I’m completely lost right now.

Tags:

3

Answers


  1. 0

    You do not include in your HTML

    Login or Signup to reply.
  2. 0

    You can directly include the html without include function like this. This is a working live snippet:

    <!DOCTYPE html>
<html>
  <head>
<meta http-equiv="Content-Type"
    content="text/html; charset=UTF-8" />
  </head>
  <body>
<div class="container">
<h2><span id="count">0</span></h2>
<button id="decBtn" class="button" onclick="onDec()">-</button>
<button id="incBtn" class="button" onclick="onInc()">+</button>
</div>
  <script>

let count = 0;
const counter = document.getElementById("count");

function onDec() {
  count = count-1;
  counter.textContent = count;
}

function onInc() {
  count = count+1;
  counter.textContent = count;
}

  </script>
  </body>
</html>
    Login or Signup to reply.
  3. 0

    You have not included the script in your HTML

    In order to execute the script, you need to add a <script> element into your HTML document.

    <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="code.js" defer></script>
  </head>
  <body>
    <div class="container">
    <h2><span id="count">0</span></h2>
    <button id="decBtn" class="button" onclick="onDec()">-</button>
    <button id="incBtn" class="button" onclick="onInc()">+</button>
    </div>
  </body>
</html>

    Notice I’ve modified your filename to code.js and I’ve used the defer keyword to ensure the code runs after the HTML loads.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search