如何在 javascript 中将文本框设置为 eval()

Question

好的，所以我正在尝试做一个小测验，您可以在其中输入一些代码，小测验会执行代码以查看您输入的内容是否与答案相同。

这是代码，这是网页的样子：

questions = "PRINT HELLO"
document.getElementById("Question").innerHTML = questions
function check(){
  document.getElementById("answertext").innerHTML = eval(document.getElementById("answerbox").value)
 
}

#answerbox{
  width:100%;
  height:500px;
  font-size:25px;
}

<h1>QUIZZZ</h1>

<h2 id = Question>JAVASCRIPT CONSOLE AND EXERCISES</h1>

<h1 id = "hi"></h1>

<textarea rows="4" cols="50" id = "answerbox">
//put your answer here
</textarea>
<textarea rows= '4' cols = "50" id = "answertext">lol</h1>
</textarea>
<input type = "submit" onclick = "check()">

运行代码看我希望用户在文本框中输入 document.write() 语句，并将评估的代码显示在较小的多行文本框中。

尝试在文本框中输入 document.write() 语句并运行它。您应该会看到一个新页面，而不是文本框中写入的答案。

我知道 document.write 在 javascript 中输出内容是一种不好的做法，我知道您可以编辑原始 HTML，但是用户可以通过其他方式打印消息而不做任何这些选择？

Answer 1

您可以使用 .append 而不是 document.write()

document.body.append("Hello World!", document.createElement('p'));

如果您在浏览器中转到 DevTools 的控制台选项卡，您可以输入 javascript 代码并按回车键执行它。您将收到对您的项目有帮助的有用错误消息。

Answer 2

好的。我意识到你的问题了。

您可以使用 iframe 来达到这个目的。添加一个 ID 类似于 'answerIframe' 而不是 #answertext 元素的 iframe。

然后将您的 #answertext 元素移动到一个单独的 html 并为其设置 iframe 的地址。

在 iframe 中：

window.check=function(){
      document.getElementById("answertext").innerHTML = 
  eval(document.answer);
}

并在您的 iframe 中添加一个按钮。对于 iframe 的按钮设置为：

onclick="window.check()"

将 Id 添加到 iframe 的按钮类似：iframe_bt。

现在，当用户点击按钮（在当前页面中，没有 iframe）时必须调用这个（主页中的新 check 函数）：

 function check(){

document.getElementById('#answerIframe').contentWindow.document.answer=document.getElementById("answerbox").value;

 document.getElementById('#answerIframe').contentWindow.document.getElementById('#iframe_bt').click();
}

同样在您的 iframe 中，在文档的 onload 中调用一个函数，如果 answertext 不存在（因为 document.write）则动态添加，或者在每个答案执行之前重置 iframe。

另一种方法是用其他类似的代码替换 document.write：elem.insertAdjacentHtml(..) 等，然后再执行它。

不好意思，我是用手机打的。我没有测试它的工具，但是方法和它的通用性是正确的。

Answer 3

Don't use eval.

使用 eval 被认为是不好的做法。阅读有关为什么 here 的更多信息。您可以使用如下所示的 return 语句让您的用户仅 return 回答，而不是让他们做一些复杂的事情，例如 document.write().

// Ask them to do this:
var codeFromTheAnswerBox = "var answer = 'HELLO'; return answer;"
// instead of this:
// var codeFromTheAnswerBox = "var answer = 'HELLO'; document.write(answer)";

// execute user's code
var code = new Function(codeFromTheAnswerBox);
var returnValue = code();

// Now do whatever you want to do with the answer like the following
alert("Your answer is " + returnValue);

如何在 javascript 中将文本框设置为 eval()

How to set a textbox to an eval() in javascript

html

javascript

eval