如何从输入执行JavaScript代码 [英] How to execute JavaScript code from input

问题描述

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

I'm creating a web game where the user types the code and the result is displayed on the screen, for Web Design classes. I've already made something to recognize HTML and CSS codes and now I'm trying with JavaScript. My problem is to execute JavaScript code. The first class is about variables.

我用光标创建了一个可编辑的屏幕，用户在其中输入代码:

I created a editable screen with a cursor where the user types the code:

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

The square is the cursor in input. I put the first part of code above the input and the score bellow just to show what is going to happen. The user insert his code (just a variable declaration) and press a submit button to test if is correct. What a tried to get the code and execute was:

$("#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"); .代码有什么问题?这是更好的方法吗?

In this example I just wanted to create a blinking animation. So I tried to get the previous code and append to user code and the rest of code to execute all the string as a function, but the part of the code: ola.style.display is not working because it says that the variable ola is null. What user should types is like: var ola = document.getElementById("ola");. What is wrong with the code? And is this the better way to do this?

推荐答案

在 setInterval()中，我们必须提供一个异步函数，因此我们必须在我们在函数内部访问的元素，否则将像您的情况一样为null.

As in setInterval() we have to give a function that is asynchronous, so we have to give reference explicitly inside the function of the elements that we are accessing inside the functions otherwise it will give null as in your case.

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

以上建议使用jQuery选择元素的更好方法，否则只需 document.getElementById('ola')即可.

Above suggests a better way to select elements using jQuery, otherwise simply document.getElementById('ola') will also work.

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

One better way to execute JavaScript is by using eval(), which may help you.

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

I have made a simple HTML page for your example:

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>

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

I think above code is implementing what you actually wants.

在文本区域中输出HTML代码和示例代码

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

Clicking Execute Button causing creation of new button and blinking of button.

新按钮成功闪烁

这篇关于如何从输入执行JavaScript代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！