如何让文本随JS变量动态变化？计数器按钮功能异常求助

问题现象 #

点击Increase按钮时，计数器显示[object HTMLHeadingElement]1；点击Decrease按钮时，计数器显示NaN。

原代码 #

HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Counter</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
    
</head>
<body style = "background-color: rgb(20, 20, 20);">
    <center><h1 class="title">Counter</h1></center>
    <center><h1 class="counter" id="counter">0</h1></center>
    <center><button type="button" class="decrease_button" onclick="decrease()">Decrease</button></center>
    <center><button type="button" class="increase_button" onclick="increase()">Increase</button></center>
    <script src='main.js'></script>
</body>
</html>

JS代码

let counterEl = document.getElementById("counter")

function decrease(){
    let counter = document.getElementById('counter')
    counter = counter - 1
    console.log(counter)

    counterEl.innerHTML = counter;

}

function increase(){
    let counter = document.getElementById('counter')
    counter = counter + 1
    console.log(counter)

    counterEl.innerHTML = counter;
}

CSS代码

.title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(243, 242, 242);
    font-size: 60px;
    transform: translateY(0%);

}
.counter{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(243, 242, 242);
    /*color: rgb(67, 205, 67)  -   green*/
    /*color: rgb(217, 56, 56)  -   red*/
    font-size: 100px;
    transform: translateY(25%);
    opacity: 60%;
}
.decrease_button {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    height: 100px;
    width: 200px;
    background-color: aliceblue;
    transform: translateX(-150%);
    cursor: pointer;

}
.increase_button {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    height: 100px;
    width: 200px;
    background-color: aliceblue;
    transform: translateX(150%);
    cursor: pointer;
}

错误原因 #

document.getElementById('counter')获取的是DOM元素对象，不是元素内的数值。执行counter + 1时，会把DOM对象转成字符串[object HTMLHeadingElement]再和1拼接，导致显示异常；执行counter - 1时，DOM对象无法转成有效数字，结果为NaN。

修复方案 #

方案1：获取元素内容并转为数值运算

每次从DOM中读取当前数值，转成数字后再运算：

let counterEl = document.getElementById("counter")

function decrease(){
    // 获取当前数值并转为数字
    let counter = Number(counterEl.innerHTML)
    counter = counter - 1
    counterEl.innerHTML = counter;
}

function increase(){
    let counter = Number(counterEl.innerHTML)
    counter = counter + 1
    counterEl.innerHTML = counter;
}

方案2：用变量存储数值（更高效）

避免频繁操作DOM，用变量存当前计数器值，仅更新DOM：

let counterEl = document.getElementById("counter")
// 初始化数值
let counter = 0

function decrease(){
    counter--
    counterEl.innerHTML = counter;
}

function increase(){
    counter++
    counterEl.innerHTML = counter;
}

额外优化（可选） #

可以调整按钮布局，让两个按钮在同一行显示：

1. 修改CSS中按钮的样式，移除transform改为margin：

.decrease_button {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    height: 100px;
    width: 200px;
    background-color: aliceblue;
    margin-right: 20px;
    cursor: pointer;
}
.increase_button {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    height: 100px;
    width: 200px;
    background-color: aliceblue;
    margin-left: 20px;
    cursor: pointer;
}

2. 修改HTML中按钮的包裹结构：

<center>
    <button type="button" class="decrease_button" onclick="decrease()">Decrease</button>
    <button type="button" class="increase_button" onclick="increase()">Increase</button>
</center>

内容的提问来源于stack exchange，提问作者TaranJS