我如何打印逻辑中的最后一个字母

Question

我有一个代码可以在突出显示的文本上打印按下键的字母。但是我无法打印最后一个字母（这里是字母 F）。谁能指出我逻辑中的问题。
没有在输入标签中打印文本我想在按下时转到不同的页面，我该怎么做（我需要将它们更改为锚标签并添加 6 页吗？）

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(() => 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;

}

});

.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;
}

<!DOCTYPE html>
<html>
<head>
    <title>Talk</title>

    
</head>
<body>
<div id="keys">
  <div class="key">A</div>
  <div class='key'>B</div>
  <div class='key'>C</div>
  <div class='key'>D</div>
  <div class='key'>E</div>
  <div class='key'>F</div>
</div>
<input id="message"></input>

</body>
</html>

Answer 1

要回答您的第一个问题，您的索引不是 1,2,3,4,5,6，而是 1,2,3,4,5,0。我对代码做了一些修改，现在它可以正常工作了。

关于第二个问题 - 我不确定我是否理解您的要求。

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?)

什么时候按下？转到不同的页面是什么意思？导航到另一个 URL?

let curr_div = 0;


const key = document.getElementsByClassName("key");


function setPlaying() {
  key[curr_div].classList.remove("playing");
  curr_div = (curr_div + 1) % 6; 
  key[curr_div].classList.add("playing");      
}

setInterval(setPlaying, 500);


document.addEventListener('keypress', function(){
  var input = document.getElementById('message');     

  if (curr_div==0) {
      let letter = 'A';
      input.value += letter;

  } else if(curr_div==1) {
      let letter = 'B';
      input.value += letter;

  } else if(curr_div==2) {
      let letter = 'C';
      input.value += letter;

  } else if(curr_div==3) {
      let letter = 'D';
      input.value += letter;

  } else if(curr_div==4) {
      let letter = 'E';
      input.value += letter;
  } else if(curr_div==5) {
      let letter = 'F';
      input.value += letter;
  }
});

.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;
}

<!DOCTYPE html>
<html>
<head>
    <title>Talk</title>

    
</head>
<body>
<div id="keys">
  <div class="key">A</div>
  <div class='key'>B</div>
  <div class='key'>C</div>
  <div class='key'>D</div>
  <div class='key'>E</div>
  <div class='key'>F</div>
</div>
<input id="message"></input>

</body>
</html>

我如何打印逻辑中的最后一个字母

How can i print the last letter in my logic

javascript

css

dom

css-transitions