CODEWITHSUNDEEP
javascripthtml
Mateus Rocha
Mateus Rocha

Reputation: 71

How to execute JavaScript code from input

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:

enter image description here

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?

Upvotes: 4

Views: 6497

Answers (2)

Ankit Agrawal
Ankit Agrawal

Reputation: 611

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

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:

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:

Successfully blinking new button

Upvotes: 3

mintii
mintii

Reputation: 21

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.com/id-selector/

Upvotes: 2

Related Questions