Using buttons to change values in Javascript

[RyWalk11]

I have been working on creating an app for the Fitbit Ionic that can toggle a number with the buttons on the watch (up adds one, down subtracts one). Unfortunately, the code I've put together is not quite working. I feel like I'm missing something simple. 

Here is what I have so far in the Javascript:

import document from "document";

document.onkeypress = function(e) {
  console.log("Key pressed: " + e.key);
}

const test2 = document.getElementById("test2");

  let test0 = 0
  let upPress = "Key pressed: up"
  let downPress = "Key pressed: down"

upPress = (evt) => {
var num = Number($(test0).val()) + 1;
}  

downPress = (evt) => {
var num = Number($(test0).val()) - 1;
}  

test2.text = `${test0}`; 

And the Index.gui

<svg class="background">
    <text id="test2"></text>
</svg>

Would anyone happen to know what I've done wrong here?

[Gondwana]

Some random thoughts:

• You're not executing anything useful in your onkeypress handler.
• num, upPress and downPress are never used.
• test0 is never changed.
• test2.text is set when the code first runs, but never again.

There are also much more concise ways of incrementing and decrementing numeric variables!

Hopefully this will help you to sew it together.

[RyWalk11]

Would this be a better way to use the onkeypress handler? 

document.onkeypress = function(e) {
  console.log("Key pressed: " + e.key);
var num = Number($(test0).val()) + 1;
}

Sorry, I'm very new to all this.

[Gondwana]

Yes, that's definitely a step in the right direction.

A kind person would probably tell you what the answer is.

I am not a kind person.

Forgetting about programming, can you describe in English what you would like to happen when a key is pressed? Feel free to describe what should happen to variables such as test0 and test2 (which could benefit from clearer names, but that's another story).

[RyWalk11]

Pretty much, I'm trying to put a number on the screen that starts at 0 and goes up or down based on the up and down buttons. Up for +1 and down for -1.

[RyWalk11]

Test0 is the number that starts at 0 and changes on button press, Test2 was what I was using to bring it into the SVG.

[RyWalk11 · Accepted solution]

I got it working!

import document from "document";
let test2 = document.getElementById("test2");
let test0 = 0;
test2.textContent = test0;
function buttonPress(e){
    console.log("Key pressed: "+e.key);
    if(e.key==="up"){
        test0++;
    }
    if(e.key==="down"){
        test0--;
    }
    test2.textContent = test0;
}
document.onkeydown = buttonPress;

[Gondwana]

Good stuff!

[RyWalk11]

Any thoughts on how to retain the value even when the app exits out? Or is that an unsupported feature. 

[Gondwana]

Have a look at onunload and the File System API.