Javascript command insertion HTML

Question

I want to create a JavaScript Command Execution .. I mean, if I build up a page, with an input method, then, the value of that input method is executed in the JavaScript console, then, the result of that execution should be inserted in an HTML tag as: HTML:

<input id="commandInsertion"/>
<input type="Submit" onclick="doCommand()">
<p id="result"></p>

JavaScript:

var doCommand = function(x) {
   // The command should be something like this
   Execute(x); // Imaginary Function
   document.getElementById('result').innerHTML = ResultOf(x);
   // ResultOf() is also an imaginary function
};

doCommand is a function that executes a command and then, prints it into the document

By command execution do you mean you just want to display the command in the browser console? — Gjohn, Dec 29 '15 at 14:55
It is not clear what you mean by *javascript console*, my interpretation is: you need a function that does **x** and another function that takes the result of **x** writes it to the document, is that correct? — AGE, Dec 29 '15 at 14:55
FWIW You cannot set the value of `innerHTML` on `input` elements. See [What is innerHTML on input elements?](http://stackoverflow.com/questions/20604299/what-is-innerhtml-on-input-elements) Try setting the `value` property or use a different HTML placeholder that can contain `innerHTML` such as a `div`. — gfullam, Dec 29 '15 at 14:56
an input element doesn't have innerHTML. You can use .val() or change the input element to a div. — feskr, Dec 29 '15 at 15:35

score 3 · Accepted Answer · edited May 23 '17 at 12:15

3

Simple. Heard of eval? It is a fun and dangerous function. It allows you to evaluate code during runtime. Here's an example:

$('#calc').on('input', function() {
  try {
    $('#out').val(eval($('#calc').val()));
  } catch (e) {
    $('#out').val('ERROR!')
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Input:
<br>
<input id='calc'>
<br>Output:
<br>
<input id='out'>

It's simple, but eval can also be dangerous. It can allow attackers to do anything you can do. You might want to read up on this:

Restricting eval() to a narrow scope

So here's the code you want:

var doCommand = function() {
  // The command should be something like this
  document.getElementById('output').innerHTML = eval(document.getElementById('commandInsertion').value);
};

<input id="commandInsertion" />
<div id="output"></div>
<br>
<br>
<input type="Submit" onclick="doCommand()">

edited May 23 '17 at 12:15

Community

1
1

answered Dec 29 '15 at 14:59

Neither of your examples seem to work. Perhaps `eval()` is supressed in the SO editor.? – gfullam Dec 29 '15 at 15:02
I want to insert a value inside the input method, when I click submit, it is executed.. And when I open the console( F12 ) The function is executed, As of: The input should have `var Xeiad = "Hello World!";` Then when I open the console( F12 ), and type `console.log(Xeiad);` It should return `Hello World!` The `eval()` works when directly executed through console, but not through getting the value of the input method .. Your answer seems to work, but it is not the answer that I was looking to find, Anyway, thanks for your help, I'll try to use your way of collecting data from the input method – Ziad Amerr Dec 29 '15 at 18:39

score 1 · Answer 2 · edited Jan 07 '16 at 15:46

1

What I got from your explaining that you need some thing such as the following:

function getInsertedValue() {
  var txt = document.getElementById('commandInsertion').value;
  updateElem(txt);
}

function updateElem(insertedTxt) {
  document.getElementById("updatedTxt").innerHTML = eval(insertedTxt);
}

<div>
  <input type="text" id="commandInsertion" />
  <span id="updatedTxt"></span>
  <input type="Submit" onclick="getInsertedValue()">
</div>

edited Jan 07 '16 at 15:46

Ziad Amerr

163
1
14

answered Dec 29 '15 at 15:26

mustafa-elhelbawy

530
6
21

1

Your code doesn't seem to exactly do what I want, but thanks, I had to change the insertedTxt in the function from `..ML = insertedTxt..` to `..ML = eval(insertedTxt)..` – Ziad Amerr Jan 07 '16 at 14:44

score -1 · Answer 3 · answered Dec 29 '15 at 14:55

-1

Don't you just mean eval function?

The eval() function evaluates or executes an argument.

Use it very carefully - at it allows the user to run any javascript command and that is a big security risk.

answered Dec 29 '15 at 14:55

Igal S.

13,146
5
30
48

Javascript command insertion HTML

3 Answers3