Question

只是学习javascript，我正在尝试将DND Starting Kit作为一个小项目，是否可以创建一个文本框或命令提示符，可以使用我的代码中的函数和变量？我只是想把它放在左下角，这样用户就可以输入他想做的命令/功能。

Answer 1

是的，您可以使用 eval ，但它确实很慢并且可能会导致很多问题。

你应该使用try＆amp; catch这样的

    var input = document.getElementById("inputElement").value;

    try{
    //evaluate string as code
    eval(input);
    }catch(e){
    //if something goes wrong
  }

对于“如何制作所述文本框”部分，有 textarea 元素

<textarea id="inputElement" rows="5" cols="100">
<!--User will put input here-->
</textarea>

编辑：

好的，所以你问我一个如何制作某种控制台的例子。

以下是一个例子：

var consoleElement = document.getElementById("myConsole");
var inputElement = document.getElementById("userInput");
var buttonElement = document.getElementById("enter");
inputElement.onkeypress = keyPressed;
buttonElement.onclick = enter;

var myConsole = {
  consoleElement: consoleElement,
  write: function(input) {
    this.consoleElement.innerHTML += input;
  },
  writeln: function(input) {
    this.consoleElement.innerHTML += "</br>" + input;
  },
  clear: function() {
    this.consoleElement.innerHTML = "";
  }
}

function enter() {
  var inputString = inputElement.value;
  var str = inputString.substring(inputString.indexOf(' '));
  switch(true){
  case inputString.startsWith("clear"):
  myConsole.clear();
  break;
  case (inputString.startsWith("write") && !inputString.startsWith("writeln")):
  myConsole.write(str);
  break;
  case inputString.startsWith("writeln"):
  myConsole.writeln(str);
  break;
  default:
  myConsole.writeln(inputString.split(" ")[0] + " isn't recognized command");
  }
  inputElement.value = "";
}

function keyPressed(e) {
  if (e.keyCode == 13) {
  enter();
    return false;
  }
}

#wrapper {
  border: 1px solid black;
  width: 500px;
}

#myConsole {
  width: 500px;
  height: 200px;
}

#userInput {
  width: 400px;
}

#enter {
  width: 90px;
}

<div id="wrapper">
  <div id="myConsole">Welcome to the best console ever!</div>
  <input type="text" id="userInput" />
  <button id="enter">ENTER</button>
</div>

这真的很不错，但我刚刚向您展示了一个可以制作控制台的示例。你当时有3个命令：清除，写入，写入使用它。试着理解它是如何工作的，你可以尝试解决这个问题，如果你写了太多次文本开箱即用！干杯！

Answer 2

是。您可以。你需要一个textarea并使用javascript“eval”函数：

function command(){
    let cmds = document.getElementById('txtCommands').value;
    console.log(cmds);
    eval(cmds);
}

<textarea col="3" id="txtCommands" name="txtCommands">
alert(1)
</textarea>

<br/>

<button type="button" onclick="command()">Apply</button>

网站中的命令提示符

2 个答案:

编辑：