Javascript 为什么我创建的这个命令历史不'；不行？_Javascript_Html_Arrays

Javascript 为什么我创建的这个命令历史不'；不行？

javascript html arrays

Javascript 为什么我创建的这个命令历史不'；不行？,javascript,html,arrays,Javascript,Html,Arrays,我正在尝试创建一个js控制台，我想做一件控制台的事情，当你按下向上箭头时，它会放入你执行的最后一个命令。所以我这么做了，但我不知道为什么它不起作用： HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="MightyCoderX"> <meta name="viewp

我正在尝试创建一个js控制台，我想做一件控制台的事情，当你按下向上箭头时，它会放入你执行的最后一个命令。所以我这么做了，但我不知道为什么它不起作用：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="MightyCoderX">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Online Js Console</title>
    <script src="main.js"></script>
    <link rel="stylesheet" href="general.css">
</head>
<body>
    <div class="input-container">
        <div class="prompt">></div>
        <input class="input">
    </div>
    <div class="output"></div>
</body>
</html>


在线Js控制台
>

var input;
var output;
var cmdHistory = [];

window.onload = function()
{
    input = document.querySelector(".input");
    output = document.querySelector(".output");

    input.onkeydown = function(e)
    {   
        var currentIndex;
        if(e.key == "Enter" && input.value)
        {
            var inputExp = document.createElement("p")
            inputExp.id = "inputExp";
            inputExp.innerHTML = "> " + input.value;
            cmdHistory.push(input.value);
            output.appendChild(inputExp);

            var result = document.createElement("p");

            result.id = "result";
            output.appendChild(result);
            try
            {
                result.innerHTML = "< " + eval(input.value);
            }
            catch(ex)
            {
                result.innerHTML = ex;
                result.style.color = "red";
            }

            var topPos = result.offsetTop;
            output.scrollTop = topPos;

            currentIndex = cmdHistory.length-1;
            console.log(currentIndex);
            input.value = "";
        }


        console.log("Out " + currentIndex);
        if(e.key == "ArrowUp")
        {
            if(currentIndex > -1)
            {
                console.log("In " + currentIndex);
                input.value = cmdHistory[currentIndex];

                currentIndex -= 1;
                console.log("After " + currentIndex);
            }
        }
    }

}

var输入；
var输出；
var cmdHistory=[]；
window.onload=函数（）
{
输入=document.querySelector（“.input”）；
输出=document.querySelector（“.output”）；
input.onkeydown=功能（e）
{   
var电流指数；
如果（e.key==“输入”&&input.value）
{
var inputExp=document.createElement（“p”）
inputExp.id=“inputExp”；
inputExp.innerHTML=“>”+input.value；
cmdHistory.push（输入值）；
output.appendChild（inputExp）；
var结果=document.createElement（“p”）；
result.id=“result”；
输出.appendChild（结果）；
尝试
{
result.innerHTML=“<”+eval（input.value）；
}
捕获（ex）
{
result.innerHTML=ex；
result.style.color=“红色”；
}
var topPos=result.offsetTop；
output.scrollTop=topPos；
currentIndex=cmdHistory.length-1；
console.log（currentIndex）；
input.value=“”；
}
console.log（“退出”+当前索引）；
如果（e.key==“箭头向上”）
{
如果（当前索引>-1）
{
console.log（“In”+currentIndex）；
input.value=cmdHistory[currentIndex]；
currentIndex-=1；
console.log（“在”+currentIndex之后）；
}
}
}
}

这是我的代码idk出了什么问题我认为它还可以，但显然它不起作用，因为如果我按下向上箭头，它会显示以下内容：

只需将

var currentIndex

移动到

窗口外部。onload

功能。这可能对你有用

var input;
var output;
var cmdHistory = [];
var currentIndex; 
window.onload = function()
{
    input = document.querySelector(".input");

    output = document.querySelector(".output");

    input.onkeydown = function(e)
    {   

        if(e.key == "Enter" && input.value)
        {
            var inputExp = document.createElement("p")
            inputExp.id = "inputExp";
            inputExp.innerHTML = "> " + input.value;
            cmdHistory.push(input.value);
            output.appendChild(inputExp);

            var result = document.createElement("p");

            result.id = "result";
            output.appendChild(result);
            try
            {
                result.innerHTML = "< " + eval(input.value);
            }
            catch(ex)
            {
                result.innerHTML = ex;
                result.style.color = "red";
            }

            var topPos = result.offsetTop;
            output.scrollTop = topPos;


            currentIndex = cmdHistory.length-1;
            console.log(currentIndex);
            input.value = "";
        }


        console.log("Out " + currentIndex);
        if(e.key == "ArrowUp")
        {
            if(currentIndex > -1)
            {
                console.log("In " + currentIndex);
                input.value = cmdHistory[currentIndex];

                currentIndex -= 1;
                console.log("After " + currentIndex);
            }
        }
    }

}

var输入；
var输出；
var cmdHistory=[]；
var电流指数；
window.onload=函数（）
{
输入=document.querySelector（“.input”）；
输出=document.querySelector（“.output”）；
input.onkeydown=功能（e）
{   
如果（e.key==“输入”&&input.value）
{
var inputExp=document.createElement（“p”）
inputExp.id=“inputExp”；
inputExp.innerHTML=“>”+input.value；
cmdHistory.push（输入值）；
output.appendChild（inputExp）；
var结果=document.createElement（“p”）；
result.id=“result”；
输出.appendChild（结果）；
尝试
{
result.innerHTML=“<”+eval（input.value）；
}
捕获（ex）
{
result.innerHTML=ex；
result.style.color=“红色”；
}
var topPos=result.offsetTop；
output.scrollTop=topPos；
currentIndex=cmdHistory.length-1；
console.log（currentIndex）；
input.value=“”；
}
console.log（“退出”+当前索引）；
如果（e.key==“箭头向上”）
{
如果（当前索引>-1）
{
console.log（“In”+currentIndex）；
input.value=cmdHistory[currentIndex]；
currentIndex-=1；
console.log（“在”+currentIndex之后）；
}
}
}
}

更改此选项

var currentIndex;

到

非常感谢。真可惜！就这么简单！有时我的大脑停止反应：）

var currentIndex = cmdHistory.length -1;