Hi,
I'd like to create a textarea and a division so that whatever embed code you put in the textarea it gets executed on the division in real-time.
Your kind help is greatly appreciated!
JavaScript newbie
Full Version: Execute dynamic HTML/JavaScript
Like this?
CODE
<div id="result"></div>
<textarea cols="50" rows="20"
onkeyup="document.getElementById('result').innerHTML=this.value;"></textarea>
<textarea cols="50" rows="20"
onkeyup="document.getElementById('result').innerHTML=this.value;"></textarea>
QUOTE(Christian J @ May 13 2011, 07:48 AM) 
Like this?
CODE
<div id="result"></div>
<textarea cols="50" rows="20"
onkeyup="document.getElementById('result').innerHTML=this.value;"></textarea>
<textarea cols="50" rows="20"
onkeyup="document.getElementById('result').innerHTML=this.value;"></textarea>
Exactly! But it should be able to run JavaScript embeddings too.
Inline scripts seems to work:
but not function calls or SCRIPT elements.
CODE
<h1 onmouseover="alert('bar');">foo</h1>
but not function calls or SCRIPT elements.
Dear Christian,
I'm almost there! Based on your simple and working code I built the following:
All I need is using eval function to get the whole code (HTML / JavaScript) as a variable. I don't know how to do it and your help is very much appreciated!
I'm almost there! Based on your simple and working code I built the following:
CODE
<script type="text/javascript">
var X = " HTML or JavaScript "
window.onload=function()
{
document.getElementById("result").innerHTML = document.getElementById("input").value;
}
</script>
<textarea id="input" cols="35" rows="7"> X </textarea>
<div id="result"></div>
var X = " HTML or JavaScript "
window.onload=function()
{
document.getElementById("result").innerHTML = document.getElementById("input").value;
}
</script>
<textarea id="input" cols="35" rows="7"> X </textarea>
<div id="result"></div>
All I need is using eval function to get the whole code (HTML / JavaScript) as a variable. I don't know how to do it and your help is very much appreciated!
QUOTE(Hermes @ May 13 2011, 08:46 PM)
CODE
<script type="text/javascript">
var X = " HTML or JavaScript "
var X = " HTML or JavaScript "
What is the purpose of the variable X above? Do you somehow want to associate it with the TEXTAREA's content:
QUOTE
CODE
<textarea id="input" cols="35" rows="7"> X </textarea>
?
QUOTE
All I need is using eval function to get the whole code (HTML / JavaScript) as a variable.
Didn't understand that, why do you want to use eval(), and which code do want to make a variable?
QUOTE(Christian J @ May 13 2011, 05:32 PM)
What is the purpose of the variable X above? Do you somehow want to associate it with the TEXTAREA's content?
Exactly!
QUOTE
which code do want to make a variable?
Any HTML or JavaScript. For example:
CODE
<div style="color:red">Some Text<div>
or
CODE
<script type="text/javascript">
document.write('Hello world!');
</script>
document.write('Hello world!');
</script>
You can use a variable like this:
but maybe that's not what you want...
It might work better if you create a completely new page (using a server-side script, or maybe by opening a new window with javascript), then you can insert any javascript (such as document.write) from the start.
CODE
<textarea id="input" cols="35" rows="7"></textarea>
<div id="result"></div>
<script type="text/javascript">
var x='<div style="color:red">Some Text</div>';
window.onload=function()
{
document.getElementById('result').innerHTML=x;
document.getElementById('input').onkeyup=function()
{
document.getElementById('result').innerHTML=this.value;
}
}
</script>
<div id="result"></div>
<script type="text/javascript">
var x='<div style="color:red">Some Text</div>';
window.onload=function()
{
document.getElementById('result').innerHTML=x;
document.getElementById('input').onkeyup=function()
{
document.getElementById('result').innerHTML=this.value;
}
}
</script>
but maybe that's not what you want...
It might work better if you create a completely new page (using a server-side script, or maybe by opening a new window with javascript), then you can insert any javascript (such as document.write) from the start.
QUOTE(Christian J @ May 14 2011, 04:50 AM)
but maybe that's not what you want...
Many thanks for your time and answer, but as you know it doesn't support JavaScript embeddings.
Let's just forget about the above question and take a similar one:
I wonder how I can set X equal to a code:
CODE
<html>
<body>
<script type="text/javascript">
var X = " HTML or JavaScript code "
document.write(X);
</script>
</body>
</html>
<body>
<script type="text/javascript">
var X = " HTML or JavaScript code "
document.write(X);
</script>
</body>
</html>
I'd like to use eval to set the whole code as one variable, but I have no idea how to do it.
QUOTE(Hermes @ May 14 2011, 12:14 PM)
I wonder how I can set X equal to a code:
This actually works:
CODE
<script type="text/javascript">
var x='<script type="text\/javascript">alert(\'Hello\');<\/script>';
document.write(x);
</script>
var x='<script type="text\/javascript">alert(\'Hello\');<\/script>';
document.write(x);
</script>
But note that document.write can only be used when the page loads, not afterwards.
QUOTE
I'd like to use eval to set the whole code as one variable, but I have no idea how to do it.
AFAIK eval() evaluates whatever's inside, so I don't think that's what you need.
We're almost there, but how can making special characters (backslashes) be done automatically?
QUOTE(Hermes @ May 14 2011, 05:43 PM)
We're almost there
Are we?
QUOTE
how can making special characters (backslashes) be done automatically?
You might use the replace() function for that. Don't know which regular expression that find slashes or single quotes, though.
QUOTE(Christian J @ May 14 2011, 04:02 PM)
You might use the replace() function for that. Don't know which regular expression that find slashes or single quotes, though.
This seems interesting although I'd prefer it to be done automatically:
http://www.molendijk.freei.me/converters/converter_arie.html
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.