Question

我正在创建一个Web游戏，用户在其中键入代码，并将结果显示在屏幕上，用于Web设计类。我已经做了一些事情来识别 HTML 和 CSS 代码，现在我正在尝试使用JavaScript。我的问题是执行JavaScript代码。第一类是关于变量的。

我创建了一个带有光标的可编辑屏幕，用户在其中键入代码：

正方形是输入中的光标。我将代码的第一部分放在输入和分数下方，以表明将要发生的情况。用户插入他的代码（只是一个变量声明），然后按下提交按钮以测试是否正确。尝试获取代码并执行的是：

$("#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();
});

在此示例中，我只想创建一个闪烁的动画。因此，我尝试获取之前的代码并追加到用户代码和其余代码中，以将所有字符串作为函数执行，但是部分代码ola.style.display无法正常工作，因为它表示变量 ola 为空。用户应输入的内容类似于：var ola = document.getElementById("ola");。代码有什么问题？这是更好的方法吗？

Answer 1

我可能需要查看更多有关这一切如何工作的代码，但我相信ola为空是因为您如何选择它。
由于您使用的是jQuery，因此可以执行类似于$('#ola')的操作来选择正确的元素，然后可以评估样式。 https://api.jquery.com/id-selector/

Answer 2

与setInterval()中一样，我们必须提供一个异步函数，因此我们必须在要在函数内部访问的元素的函数内部显式地提供引用，否则将像您的情况一样给出null。

https://stackoverflow.com/a/54753138/11052486

上文提出了一种使用jQuery选择元素的更好方法，否则简单地document.getElementById('ola')也将起作用。

执行JavaScript的一种更好的方法是使用eval()，这可能会对您有所帮助。

我为您的示例制作了一个简单的HTML页面：

document.getElementById('execute').onclick = function() {
  eval(document.getElementById('box').value);
}

<div>
  <textarea id="box" rows="20" cols="200"></textarea>
  <br>
  <button style="width: 2cm;height: 1cm;" id="execute">Execute</button>
</div>

我认为上面的代码正在实现您真正想要的。

Output Of HTML Code and a sample code in textarea

单击执行按钮会导致创建新按钮并使按钮闪烁。

Successfully blinking new button

如何从输入中执行JavaScript代码

2 个答案: