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

编程问答 2022-08-16

问题描述

    @H_404_1@我有一个代码，可以打印突出显示的文本上按下键的字母。但是我无法打印最后一个字母（这里的字母F）。谁能指出我的逻辑问题。 @H_404_1@没有在输入标签中打印文本，我想在按下时想转到另一页，我该怎么做（我需要将它们更改为锚标签并添加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.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>

解决方法

要回答第一个问题，索引不是1,2,3,4,5,6，而是1,0。我已经对代码进行了一些更改，现在它可以按预期运行。

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

在输入标签中不打印文本，我想在按下时转到另一页，我该怎么做（我需要将它们更改为锚标签并添加6页吗？）

什么时候按下？您转到其他页面是什么意思？导航到其他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.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>

css-transitionsdomjavascript