如何通过按向上箭头获取最新输入（Javascript）答案

【问题标题】：How to get latest inputs by pressing the up arrow (Javascript)如何通过按向上箭头获取最新输入（Javascript）
【发布时间】：2021-02-09 21:11:22
【问题描述】：

如何获取按顺序输入的最新输入。例如：我声明了一个包含 20 个元素的数组，当我输入一些内容时，我删除了数组的第一个元素，并在最后添加了我刚刚输入的输入。

因此，当我按下向上箭头按钮时，数组的最后一个元素将作为新输入出现。如果我再按一次向上箭头，我希望我的输入更改为倒数第二个元素，依此类推。

它在我的 jsfiddle 链接中不起作用。它从数组中输出另一个元素。

var singleValues;
var theInputsNumber = 19;
var latestInputs = new Array(20);
latestInputs.fill("Latest");

function clickMe(){ 
  singleValues = $( "#input" ).val();
  var c = latestInputs.shift();
  latestInputs.push(singleValues);
  $( "#output" ).append( singleValues);
  $("#input").prop('value', ''); 
}
$(document).on('keypress',function(e) {
    $('#input').bind('keydown', function(e) {
             if (e.which === 38) {
                $("#input").prop('value', latestInputs[theInputsNumber]);
                theInputsNumber--;
             }
        });
        if(e.which == 13) {
            theInputsNumber=19;
            clickMe();
            }
});

<!DOCTYPE html>
<html>
<head>
    <title>Think Fast Trivia</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jqueryScript.js"></script>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

        
        <div  id="output" class="item1"></div>
        <input autofocus type="text" name="input" id="input" />
        <button id="send" onclick="clickMe()">Send</button>

</body>
</html>

【问题讨论】：

标签： javascript html jquery memory input

【解决方案1】：

您错过了必须确定（逻辑测试）计数器 (theInputsNumber) 的值才能在堆栈的顶部（和底部）重置的想法。

我重命名了theInputsNumber 计数器并提供了向上键和向下键功能。我也没有将数组大小限制为 20，因为无论如何这都不会产生影响（数组大小不受其他语言中的大小限制）。

编辑（基于评论）：我已将所有内容都放在 HTML 中，因此您可以将此内容保存到 HTML 文件中并使用浏览器打开。它可以在没有服务器的情况下正常工作。

<!DOCTYPE html>
<html>

<head>
  <title>Think Fast Trivia</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="output" class="item1"></div>
  <input autofocus type="text" name="input" id="input" />
  <button id="send" onclick="clickMe()">Send</button>
  
  <script>
  var counter = 0;
var latestInputs = [];

function clickMe() {
  let input = $("#input").val();
  latestInputs.push(input);
  $("#input").prop('value', '');
}
$('#input').bind('keydown', function(e) {
  if (e.which === 38) {
    $("#input").prop('value', previous());
  } else if (e.which == 40) {
    $("#input").prop('value', next());
  } else if (e.which == 13) {
    clickMe();
  }
});

function previous() {
  counter = (counter === 0) ? latestInputs.length - 1 : --counter;
  return latestInputs[counter];
}

function next() {
  counter = (counter === latestInputs.length - 1) ? 0 : ++counter ;
  return latestInputs[counter];
}
  </script>
</body>

</html>

【讨论】：

我认为我必须将页面放在服务器上，这就是为什么例如在某些情况下我按下向上箭头并且如果我在与这些文件关联的浏览器中打开什么都不会发生。在 jsfiddle 上工作正常。或者我只需要直接下载 JQuery ？
如果您将此处的内容放置在 HTML 页面中，并且脚本标签中包含脚本，则它可以在没有服务器的情况下工作。
@ztonaz - 我用 HTML 中的所有内容编辑了我的答案。只需将其保存到 HTML 文件中，然后使用浏览器打开即可。它可以在没有服务器的情况下正常工作。
What should I do when someone answers my question?
感谢您的评论...以及您的宝贵时间。您的解决方案很专业。唯一的一点是，如果您从外部 js 文件链接脚本，则必须将其放在正文的末尾。如果你把它放在头部，向上箭头它不起作用。我刚看到这个

【解决方案2】：

看起来你在 upArrow 上的函数被触发了多次 (3) 每次你按下那个键时，我把它移到“keypress”绑定之外并且它保持独立，当我运行时问题不再存在代码

var singleValues;
var theInputsNumber = 19;
var latestInputs = new Array(20).fill("Latest");

function clickMe() {
  singleValues = $("#input").val();
  latestInputs.shift();
  latestInputs.push(singleValues);
  theInputsNumber = 19;
  $("#output").append(singleValues);
  $("#input").prop("value", "");
}
  

     
$(document).on("keypress", function (e) {
  if (e.which === 13) {
    clickMe();
  }
});
$("#input").bind("keydown", function (e) {
  var x = e.which || e.keyCode;
  if (x === 38) {
    $("#input").prop("value", latestInputs[theInputsNumber--]);
    if (theInputsNumber === -1) {
      theInputsNumber = 19;
    }
  }
});

<!DOCTYPE html>
<html>
<head>
    <title>Think Fast Trivia</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jqueryScript.js"></script>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

        
        <div  id="output" class="item1"></div>
        <input autofocus type="text" name="input" id="input" />
        <button id="send" onclick="clickMe()">Send</button>

</body>
</html>

【讨论】：