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

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?

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

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?

• javascript
• html

• eval iirc? Dangerous though w3schools./jsref/jsref_eval.asp stackoverflow./questions/86513/… – JGFMK Commented Feb 18, 2019 at 18:06
• @JGFMK Although the use of eval on the client side should in theory never break anything important, only the client code. (Servers should always validate ining data/requests.) – 3limin4t0r Commented Feb 18, 2019 at 18:10
• @JGFMK Sorry, I forgot my code to get the user input. – Mateus Rocha Commented Feb 18, 2019 at 18:11
• I highly suggest not letting the user write his own javascript code. This leaves room for xss which is very dangerous. en.wikipedia/wiki/Cross-site_scripting – Aniket G Commented Feb 18, 2019 at 18:11
• These two questions might be related: stackoverflow./questions/17513212/… and stackoverflow./questions/195149/… – 3limin4t0r Commented Feb 18, 2019 at 18:17

2 Answers 2

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./a/54753138/11052486

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

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

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="5" cols="80"></textarea>
  <br>
  <button style="width: 2cm;height: 1cm;" id="execute">Execute</button>
</div>

I think above code is implementing what you actually wants.

Output Of HTML Code and a sample code in textarea:

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

Successfully blinking new button:

I may need to see more code on how this is all working, but I believe that ola is null is because of how you're selecting it.
Since you're working with jQuery you could do something similar to $('#ola') to select the correct element and then you can evaluate the styling. https://api.jquery./id-selector/