title: How can i print the last letter in my logic
body: <ol>
  <li>I have a code that prints the letters in which the key is pressed on the highlighted text. But I was unable to print the last letter (letter F here) . can anyone point out the problem in my logic.</li>
  <li>without printing text in the input tag I want to go to a different page when pressed, how can I do it( do I need to change them as anchor tag and add 6 pages?)</li>
  </ol>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let curr_div_on = 0,curr_div_off = 0;
  
  
  const key = document.getElementsByClassName("key");
  
  
  function setPlayingOn() {
    key[curr_div_on % 6].classList.add("playing");
    curr_div_on = (curr_div_on + 1) % 6; 
  }
  
  function setPlayingOff() {
    key[curr_div_off % 6].classList.remove("playing");
    curr_div_off = (curr_div_off + 1) % 6;
  }
  
  setInterval(setPlayingOn, 500);
  setTimeout(() =&gt; setInterval(setPlayingOff, 500), 500);
  
  
  
  document.addEventListener('keypress', function(){
  var input = document.getElementById('message');     
  
  if(curr_div_on==1){
      let letter = 'A';
      input.value += letter;
  
  }else if(curr_div_on==2){
      let letter = 'B';
      input.value += letter;
  
  }else if(curr_div_on==3){
      let letter = 'C';
      input.value += letter;
  
  }else if(curr_div_on==4){
      let letter = 'D';
      input.value += letter;
  
  }else if(curr_div_on==5){
      let letter = 'E';
      input.value += letter;
  
  }else if(curr_div_on==6){
      let letter = 'F';
      input.value += letter;
  
  }
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.key{
      border: 0.1rem solid black;
      border-radius: 0.5rem;
      margin : 1rem;
      padding: 1rem 0.5rem;
      width: 4rem;
      text-align: center;
      background: rgba(0,0,0,0.4);
      transition: all 1.0 ease;
      transition-duration: 0.5s;
  }
  
  .keys{
      display: grid;
    grid-template-columns: auto auto auto;
  }
  
  .playing{
      transform: scale(1,1);
      border-color: #ffc600;
      box-shadow: 0 0 1rem #ffc600;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Talk&lt;/title&gt;
  
      
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="keys"&gt;
    &lt;div class="key"&gt;A&lt;/div&gt;
    &lt;div class='key'&gt;B&lt;/div&gt;
    &lt;div class='key'&gt;C&lt;/div&gt;
    &lt;div class='key'&gt;D&lt;/div&gt;
    &lt;div class='key'&gt;E&lt;/div&gt;
    &lt;div class='key'&gt;F&lt;/div&gt;
  &lt;/div&gt;
  &lt;input id="message"&gt;&lt;/input&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>