Editing Javascript from textarea

Question

I managed to create a HTML/CSS editor, at http://hexagonest.tk/code/, but I can't manage it to work Javascript. I'm not sure why, all the code is valid. For example, go on this jfiddle, and type in this code:

<script>
function dothis(){
 document.getElementById("thewow").innerHTML = "poop!";
}
</script>
<button type="button" onclick="dothis()">Hi</button>
<p id="thewow">Hi</p>

In theory, it should work, yes? Even when I right click>inspect element, it shows that there is a valid tag. What's wrong with this?

If you didn't catch it, my problem is that Javascript is now working with my live HTML editor.

If you want all in one frame, refer to this accepted answer. http://stackoverflow.com/questions/5678787/w3school-try-it-editor. It sends the user input to your server side. You can then display this page in an iframe back on your editor. But make sure you know the security issues. — clouddreams, Feb 04 '14 at 02:32

Yves Lange · Answer 1 · 2014-02-04T02:20:37.993

0

You should use the eval() function from JavaScript.

more documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

Then you should have one form for the JavaScript and another for the html.

Beware about security issues that you can have with eval() (XSS vulnerabilities, etc...).

edited Feb 04 '14 at 02:20

answered Feb 04 '14 at 02:11

Yves Lange

3,914
3
21
33

Is there no way to have it all in one form? [W3Schools](http://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst) does it, but I can see it's using iframes and stuff.. – hexagonest Feb 04 '14 at 02:15
eval() is dangerous stuff. Try using iframe – clouddreams Feb 04 '14 at 02:18
@lovetostrike can you guide me in the right direction? – hexagonest Feb 04 '14 at 02:20
You should read this: http://stackoverflow.com/questions/8004001/how-does-jsfiddle-allow-and-execute-user-defined-javascript-without-being-danger – Yves Lange Feb 04 '14 at 02:21
I'm not looking to use a separate domain, I want to use iframe. Any suggestion? – hexagonest Feb 04 '14 at 02:24
No... what you are attempting to do is not an easy task because of the security. If you really want one form you can detect tags and eval the string inside of it. – Yves Lange Feb 04 '14 at 02:28
@Kursion How would I detect it like that? – hexagonest Feb 04 '14 at 02:59
Regular expression and JavaScript – Yves Lange Feb 04 '14 at 13:18

Ansyori · Accepted Answer · 2014-02-04T04:35:29.737

try this

<button type="button" onclick="document.getElementById('thewow').innerHTML = 'poop!'">try me</button>

Hi

---addtional---

use this script to play with your code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">
textarea, iframe {width:200px;height:200px;}
td {vertical-align:top;text-align:center;}
</style>

<script type="text/javascript">
function tryit()
{
var html = document.getElementById("code").value;

ifrm = document.getElementById("output");
var doc = ifrm.contentDocument || ifrm.contentWindow.document;
doc.open();
doc.write(html);
doc.close();
}
</script>
</head>

<body>

<table cellspacing="4" cellpadding="0" border="0">
<tr>
<td>
<textarea id="code"><html><body>Hello World!</body></html></textarea>
<br />
<button onclick="tryit();">Do it!</button>
</td>
<td>
<iframe id="output"></iframe>
</td>
</tr>
</table>

</body>
</html>

source http://w3schools.invisionzone.com/index.php?showtopic=23599

Editing Javascript from textarea

2 Answers2