Javascript 使用tampermonkey增加/减少网站上显示的数字

我正在尝试创建一个tampermonkey脚本，如果按下=/+按钮，该脚本会将网页上的数字增加1；如果按下-/u按钮，该脚本会将数字减少1；如果按下0/）键，该脚本会重置回0

下面是我现在试图修改的部分的外观：

<div class="toptext"><h1 id="counter">Count: 0</h1></div>

计数：0

我通过编写以下脚本将此文本添加到网站中（“toptext”类已经存在于页面上，因此我可以简单地编辑其内部HTML）：

document.getElementsByClassName（“toptext”）[0]。innerHTML=“计数：0”

所以0需要变成一个变量，我可以通过点击这些键随意改变它。 可悲的是，我对编码的了解非常有限，所以虽然这似乎不太难做到，但我就是不知道如何编写工作代码

我已经试着找到类似的脚本，这样我就可以复制其中的一些部分并将它们缝合在一起，但我仍然没有太多的工作要做

这就是我现在拥有的：

//First I need to create a variable with starting value of 0
var variable = 0;

//Now I need functions to increase and decrease this variable, and update the counter accordingly
function increase() {
//increase variable by 1
variable = variable+1;
//update counter
document.getElementsByClassName("toptext")[0].innerHTML = "<h1 id=\"counter\">Count: <insert variable here><\/h1>"
}

function decrease() {
//decrease variable by 1
variable = variable-1;
//update counter
document.getElementsByClassName("toptext")[0].innerHTML = "<h1 id=\"counter\">Count: <insert variable here><\/h1>"
}

function reset() {
//reset the variable back to 0
variable = 0;
//update counter
document.getElementsByClassName("toptext")[0].innerHTML = "<h1 id=\"counter\">Count: <insert variable here><\/h1>"
}

//now I need event listeners to execute these functions if one of the keys is hit
document.addEventListener('=', increase, false);
document.addEventListener('-', decrease, false);
document.addEventListener('0', reset, false);

//首先我需要创建一个起始值为0的变量
var变量=0；
//现在我需要函数来增加和减少这个变量，并相应地更新计数器
功能增加（）{
//将变量增加1
变量=变量+1；
//更新计数器
document.getElementsByClassName（“toptext”）[0]。innerHTML=“Count：”
}
函数减少（）{
//将变量减少1
变量=变量-1；
//更新计数器
document.getElementsByClassName（“toptext”）[0]。innerHTML=“Count：”
}
函数重置（）{
//将变量重置回0
变量=0；
//更新计数器
document.getElementsByClassName（“toptext”）[0]。innerHTML=“Count：”
}
//现在我需要事件监听器来执行这些函数，如果其中一个键被按下
document.addEventListener（“=”，增加，false）；
文件。添加的列表项（“-”，减少，错误）；
文档。addEventListener（'0'，重置，错误）；

---

如果有人能将其转换为工作脚本，我们将不胜感激。

您需要使用

按键

事件侦听器。JS不提供单独的按键事件侦听器，您只能使用

keyup

、

keydown

和

keypress

document.addEventListener（'keypress'，（e）=>{
开关（电子钥匙）{
案例“=”：
增加（）；
打破
案例'-'：
减少（）；
打破
案例“0”：
重置（）；
打破
}
});

完整代码如下所示：

let变量=0；
函数updateVariable（newVariable）{
变量=新变量；
document.getElementsByClassName（“toptext”）[0].innerHTML=`Count:${variable}`；
}
document.addEventListener（'keypress'，（e）=>{
开关（电子钥匙）{
案例“=”：
可更新变量（变量+1）；
打破
案例'-'：
可更新变量（变量-1）；
打破
案例“0”：
可更新变量（0）；
打破
}
});
Count:0
首先打开调试器的控制台并读取错误消息。这可能会提示您没有执行任何代码，因为第一行末尾缺少冒号。我已将代码更新为最新版本。事件侦听器中的按钮不起作用，语法肯定是错误的，不确定正确的是什么？我还需要找到一种在屏幕上实际打印变量值的方法。除此之外，我认为代码基本上还可以？当我将事件侦听器键更改为“click”时，没有收到任何错误（这会执行代码，而不像=、-或0键什么都不做），是的，这工作非常好！非常感谢你！
//First I need to create a variable with starting value of 0
var variable = 0;

//Now I need functions to increase and decrease this variable, and update the counter accordingly
function increase() {
//increase variable by 1
variable = variable+1;
//update counter
document.getElementsByClassName("toptext")[0].innerHTML = "<h1 id=\"counter\">Count: <insert variable here><\/h1>"
}

function decrease() {
//decrease variable by 1
variable = variable-1;
//update counter
document.getElementsByClassName("toptext")[0].innerHTML = "<h1 id=\"counter\">Count: <insert variable here><\/h1>"
}

function reset() {
//reset the variable back to 0
variable = 0;
//update counter
document.getElementsByClassName("toptext")[0].innerHTML = "<h1 id=\"counter\">Count: <insert variable here><\/h1>"
}

//now I need event listeners to execute these functions if one of the keys is hit
document.addEventListener('=', increase, false);
document.addEventListener('-', decrease, false);
document.addEventListener('0', reset, false);