html 如何从输入执行JavaScript代码

x4shl7ld 于 2022-12-09 发布在 Java

关注(0)|答案(2)|浏览(164)

我正在创建一个网页游戏，用户输入代码，结果显示在屏幕上，用于网页设计类。我已经做了一些识别 HTML 和 CSS 代码的东西，现在我正在尝试使用JavaScript。我的问题是执行JavaScript代码。第一个类是关于变量的。
我创建了一个带有光标的可编辑屏幕，用户可以在其中键入代码：

正方形是input中的光标。我把代码的第一部分放在input上面，分数放在下面，只是为了显示将要发生的事情。用户插入他的代码（只是一个变量声明），然后按下提交按钮来测试是否正确。a试图获得代码并执行的是：

$("#submit").on("click", function(){
    var full_code = '$(document).ready(function() {' 
                        + $(".text").val() 
                        + 'setInterval(function() {ola.style.display = (ola.style.display == \'none\' ? \'\' : \'none\');}, 500);});';
    console.log(full_code);
    var functionJS = new Function(full_code);
    functionJS();
});

在这个例子中，我只想创建一个 Flink 的动画。所以我试着把前面的代码附加到用户代码和其余的代码中，把所有的字符串作为一个函数来执行，但是代码的一部分：ola.style.display不工作，因为它表示变量 * 奥拉 * 为空。用户应键入如下内容：var ola = document.getElementById("ola"); .代码有什么问题？这是更好的方法吗？

Html

来源：https://stackoverflow.com/questions/54752984/how-to-execute-javascript-code-from-input

2条答案

按热度按时间

7ivaypg91#

在setInterval()中，我们必须给予一个异步的函数，所以我们必须在函数内部显式地给出我们在函数内部访问的元素的引用，否则它会像你的例子一样给出null。

上面建议了一种使用jQuery选择元素的更好方法，否则简单的document.getElementById('ola')也可以工作。
执行JavaScript的一种更好的方法是使用eval()，这可能会对您有所帮助。
我已经为您的示例创建了一个简单的HTML页面：
第一个
我认为上面的代码实现了你真正想要的东西。