JSFiddle - React, Tailwind, and code Playground

HTML

<h1 style="text-align: center;">JavaScript 系列五：第3課 ── 變數作用域、箭頭函式、ES6 語法</h1>

simple counter:
<button onclick="minus()">-</button>
<button onclick="plus()">+</button>
<br>
<span>result: <span id="resultNum1"></span></span>

<hr>

simple calculator:
<input type="text" id="subject" placeholder="請輸入數字" required>
<input type="text" id="object" placeholder="請輸入數字" required>
<button onclick="calculate()">加/減/乘/除</button>
<br>
<span>result: <span id="resultNum2"></span></span>

JavaScript

let i = 0;
let resultNum1 = document.querySelector("#resultNum1");
let resultNum2 = document.querySelector("#resultNum2");

function minus() {
  i--;
  resultNum1.textContent = i;
  alert(i);
}

function plus() {
  i++;
  resultNum1.textContent = i;
  alert(i);
}

function calculate() {
  let subject = parseInt(document.querySelector("#subject").value);
  let object = parseInt(document.querySelector("#object").value);

  if (!subject || !object) {
    alert("請輸入輸字");
    return;
  }

  let sum = subject + object;
  let difference = subject - object;
  let product = subject * object;
  let quotient = subject / object;

  resultNum2.textContent =
    "Sum: " +
    sum.toString() +
    ", " +
    "Difference: " +
    difference.toString() +
    ", " +
    "Product: " +
    product.toString() +
    ", " +
    "Quotient: " +
    quotient.toString();

  alert("Sum: " + sum.toString());
  alert("Difference: " + difference.toString());
  alert("Product: " + product.toString());
  alert("Quotient: " + quotient.toString());
}