Увеличение / уменьшение числа, отображаемого на веб-сайте при нажатии клавиш с помощью тампермонки - PullRequest
Новая
       21

Увеличение / уменьшение числа, отображаемого на веб-сайте при нажатии клавиш с помощью тампермонки

1 голос
/ 31 января 2020

Я пытаюсь создать скрипт tampermonkey, который увеличивает число на 1 на веб-странице при нажатии кнопки = / +, уменьшает его на 1 при нажатии кнопки - / _ и сбрасывает обратно на 0, если 0 /) нажата клавиша.

Вот как выглядит часть, которую я пытаюсь изменить сейчас: 

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

Я добавил этот текст на сайт, написав следующий скрипт tampermonkey ( класс "toptext" уже существует на странице, поэтому я могу просто отредактировать его внутренний HTML): 

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

Так что 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);

Если любой может превратить это в рабочий сценарий, это будет высоко ценится.

1 Ответ

2 голосов
/ 01 февраля 2020

Вам необходимо использовать прослушиватель событий keypress. JS не предлагает отдельных ключевых прослушивателей событий, вы можете использовать только keyup, keydown и keypress. 

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

Полный код будет выглядеть следующим образом: 

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>

Есть еще одна потенциальная проблема, при установке внутреннего HTML вы должны быть на 100% уверены, что не включаете переменные, поступающие из внешних источников (например, строк запроса или API, который вы не можете контролировать). Если вы не доверяете источнику, используйте innerText Indead. В этом случае ваш variable выглядит заслуживающим доверия, но это кое-что для дальнейшего рассмотрения.

...