Increasing/decreasing a number displayed on a website on keypress using tampermonkey

Question

I'm trying to create a tampermonkey script that increases a number by 1 on a web page if the =/+ button is pressed, decreases it by 1 when the -/_ button is pressed and resets back to 0 if the 0/) key is pressed.

Here's what the part I'm trying to modify looks like now:

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

I added this text to the website by writing the following tampermonkey script(the "toptext" class already existed on the page so I could simply edits its innerHTML):

document.getElementsByClassName("toptext")[0].innerHTML = "<h1 id=\"counter\">Count: 0<\/h1>"

So that 0 needs to be turned into a variable that I can change at will by hitting those keys. Sadly my knowledge of coding is extremely limited, so while it seems like it shouldn't be too hard to do, I just can't figure out how to write a working code.

I've tried finding similar scripts so I can copy some of those parts and stitch something together, but I still haven't got too much to work with.

This is what I have now:

//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);

If anyone could turn this into a working script, it would be much appreciated.

Answer 1

You need to use the keypress event listener. JS doesn't offer individual key event listeners, you're only able to use keyup, keydown and keypress.

document.addEventListener('keypress', (e) => {
    switch (e.key) {
        case '=':
            increase();
            break;
        case '-':
            decrease();
            break;
        case '0':
            reset();
            break;
    }
});

The full code would look like this:

let variable = 0;

function updateVariable(newVariable) {
    variable = newVariable;
    document.getElementsByClassName("toptext")[0].innerHTML = `<h1 id="counter">Count: ${variable}</h1>`;
}

document.addEventListener('keypress', (e) => {
    switch (e.key) {
        case '=':
            updateVariable(variable + 1);
            break;
        case '-':
            updateVariable(variable - 1);
            break;
        case '0':
            updateVariable(0);
            break;
    }
});

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

There's one more potential problem, when setting innerHTML you need to be 100% sure to not include variables that come from external sources (like query strings, or API you don't have control over). If you don't trust the source use innerText indead. In this case your variable looks trustworthy, but this is something for future consideration.