UPDATE - Check out the modified version here: https://codepen.io/anon/pen/wZQjQy Here is the original for reference: https://codepen.io/anon/pen/YMRLBN (had to utilize CodePen, as simply adding a snippet here doesn't link the CSS)
I essentially copied and pasted a customized on-screen keyboard that was working flawlessly (for the most part) but after moving it into a different HTML file, it no longer functions.
The keyboard I replicated
This is the keyboard; all I did was replace the characters with Cyrillic text and remove the caps, tab, shift, and all the "on" spans since I only needed the buttons and letters in uppercase. It worked perfectly on my previous page build, but that page had numerous issues due to excessive copying and pasting of material, eventually becoming unfixable. So, I decided to start fresh. Utilizing some more copy-pasting but this time incorporating Bootstrap, I managed to create something marginally better than my previous chaos. However, upon importing the on-screen keyboard from the previous HTML file, it now fails to display any characters, essentially rendering it useless. I'm quite puzzled about what might be causing this issue.
The CSS (included because there's a chance the text is being written but not visible due to messy CSS?)
// JavaScript code here...
/* CSS code goes here... */
<!-- HTML code example -->
Following a click on an li element from the keyboard, the intention is for the JS function to execute, bringing about some magic. Unfortunately, nothing is happening. My hypothesis is that the tabs aren't active when the form loads, possibly due to using Bootstrap tabs in the previous implementation while using W3 schools tabs in the current one.