Creating an interactive number pad via JS issue

1

HI
I'm trying to make a visual number pad to populate a text input field. I've found a simple JS based one here - https://github.com/samcroft/numeric-keypad and it works perfectly for what I want to achieve when I have it just in an html document. Unfortunately not in Hype.

When I drop the necessary parts in Hype I get the error 'Error in undefined: TypeError: undefined is not an object (evaluating 'confirm[0].addEventListener')'.

Attached is the project, probably something obvious/simple - my JS coding isn't the best.

numberpad1.zip (14.2 KB)

2

Have a look at Hype Reactive Content. This makes the task a no brained.

3

The error is a caught exception which the Hype runtime logs to the console. If you want to debug this further, you'll want to setup your developer tools to pause on caught exceptions. This will break at the source of the problem and help you debug. See:

Screen Shot 2022-07-11 at 10.13.18 AM
Screen Shot 2022-07-11 at 10.13.18 AM2452×716 200 KB

In this case it is coming from the line:

confirm[0].addEventListener('click', confirmValue, false);

This indicates that the querySelector line above it isn't returning any results for elements where the data-key is "Ok" so you probably need to look into why/how that isn't setup. (Glancing at the code, I'm not sure why you need an "Ok" button for a numpad!)

4

Ah yes that Ok button I removed. Did some more looking and removed any mention to the buttons I removed - still errors regarding talking to the input field. inputEl seems to be not assigning.

numberpad1a.zip (14.4 KB)

5

Thanks, I'm poking around, how do I add additional variables, so if dialing a number.

6

I found another way - modifying the innerHTML. Works mostly as I need - would love to backspace but for now this will work.
Sharing to help anyone with this requirement in the future.
Working Pad.zip (24.6 KB)

1 Like
7

Please excuse the delay as I was on the road. Here is an example using Hype Reactive Content:
ReactiveNumberPad.hype.zip (39,8 KB)

3 Likes
8

Thanks so much. Totally makes sense now - and replaces the JS solution I was using. Also lets me have another numberpad on a different scene - and carry it across scenes!

1 Like