Why is my Javascript mobile keyboard not working?

52
December 15, 2018, at 8:10 PM

I am making a javascript keyboard. I was having problems making it and I do not know why. I did all the debugging things I could and could not find a solution. This is my following code:

$(function() { 
  var $write = $('#write'), 
    shift = false, 
    capslock = false; 
 
  $('#keyboard li').click(function() { 
    var $this = $(this), 
      character = $this.html(); // If it's a lowercase letter, nothing happens to this variable 
 
    // Shift keys 
    if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) { 
      $('.letter').toggleClass('uppercase'); 
      $('.symbol span').toggle(); 
 
      shift = (shift === true) ? false : true; 
      capslock = false; 
      return false; 
    } 
 
    // Caps lock 
    if ($this.hasClass('capslock')) { 
      $('.letter').toggleClass('uppercase'); 
      capslock = true; 
      return false; 
    } 
 
    // Delete 
    if ($this.hasClass('delete')) { 
      var html = $write.html(); 
 
      $write.html(html.substr(0, html.length - 1)); 
      return false; 
    } 
 
    // Special characters 
    if ($this.hasClass('symbol')) character = $('span:visible', $this).html(); 
    if ($this.hasClass('space')) character = ' '; 
    if ($this.hasClass('tab')) character = "\t"; 
    if ($this.hasClass('return')) character = "\n"; 
 
    // Uppercase letter 
    if ($this.hasClass('uppercase')) character = character.toUpperCase(); 
 
    // Remove shift once a key is clicked. 
    if (shift === true) { 
      $('.symbol span').toggle(); 
      if (capslock === false) $('.letter').toggleClass('uppercase'); 
 
      shift = false; 
    } 
 
    // Add the character 
    $write.html($write.html() + character); 
  }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This is my HTML code

<!DOCTYPE html PUBLIC    
<html xmlns= xml:lang="en" lang="en">
<head>
  <title>CyberStopKeyboard</title> 
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
</head>
<body>
  <div id="container">
    <textarea id="write" rows="6" cols="60"></textarea>
    <ul id="keyboard"> 
      <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
      <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
      <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
      <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
      <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
      <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
      <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
      <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
      <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
      <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
      <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
      <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
      <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
      <li class="delete lastitem">delete</li>
      <li class="tab">tab</li>
      <li class="letter">q</li>                      
      <li class="letter">w</li>         
      <li class="letter">e</li>
      <li class="letter">r</li>                          
      <li class="letter">t</li>
      <li class="letter">y</li>
      <li class="letter">u</li>
      <li class="letter">i</li>
      <li class="letter">o</li>
      <li class="letter">p</li>
      <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
      <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
      <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
      <li class="capslock">caps lock</li>
      <li class="letter">a</li>
      <li class="letter">s</li>    
      <li class="letter">d</li>
      <li class="letter">f</li>
      <li class="letter">g</li>
      <li class="letter">h</li>    
      <li class="letter">j</li>
      <li class="letter">k</li>
      <li class="letter">l</li>
      <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
      <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
      <li class="return lastitem">return</li>
      <li class="left-shift">shift</li>
      <li class="letter">z</li>
      <li class="letter">x</li>
      <li class="letter">c</li>
      <li class="letter">v</li>
      <li class="letter">b</li>
      <li class="letter">n</li>
      <li class="letter">m</li>
      <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
      <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
      <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
      <li class="right-shift lastitem">shift</li>
      <li class="space lastitem">&nbsp;</li> 
    </ul>
  </div>
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src="js/keyboard.js"></script>
</body>
</html>

Can some brilliant minded person please help me? I think that I have messed up on the curly brackets or semicolons because I always mess up on that. If someone needs additional details please let me know.

READ ALSO
Using kepresses and if statements to enable and disable elements

Using kepresses and if statements to enable and disable elements

I am using electron to build an app that has a fullscreen feature (of course)I am trying to use the F11 key (keyCode = "85") to enable a message on my Html page that tells the user to press F11 to exit fullscreen

44
Fix Error writing to store for query QUERYNAME

Fix Error writing to store for query QUERYNAME

I have a page with infinite loading enabledI pull and skip thru a list of notices

34
Assigning date sequences to pandas groupby groups

Assigning date sequences to pandas groupby groups

I have a dataframe in pandas with shops and item ids columnsI'd like to assign to each couple (shop, item_id) a data range of a month

31
Android memory leak issue [on hold]

Android memory leak issue [on hold]

I am confused on which line of code that is causing memory leakHere is the dump from the Leak Canary app

37