The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Execute dynamic HTML/JavaScript
Hermes
post May 13 2011, 12:20 AM
Post #1





Group: Members
Posts: 7
Joined: 7-March 11
Member No.: 14,061



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 13 2011, 07:48 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Like this?

CODE
<div id="result"></div>
<textarea cols="50" rows="20"
onkeyup="document.getElementById('result').innerHTML=this.value;"></textarea>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hermes
post May 13 2011, 11:06 AM
Post #3





Group: Members
Posts: 7
Joined: 7-March 11
Member No.: 14,061



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>



Exactly! But it should be able to run JavaScript embeddings too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 13 2011, 01:40 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Inline scripts seems to work:

CODE
<h1 onmouseover="alert('bar');">foo</h1>

but not function calls or SCRIPT elements.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hermes
post May 13 2011, 01:46 PM
Post #5





Group: Members
Posts: 7
Joined: 7-March 11
Member No.: 14,061



Dear Christian,

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>


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!

This post has been edited by Hermes: May 13 2011, 01:47 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 13 2011, 05:32 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Hermes @ May 13 2011, 08:46 PM) *

CODE
<script type="text/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? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hermes
post May 13 2011, 10:22 PM
Post #7





Group: Members
Posts: 7
Joined: 7-March 11
Member No.: 14,061



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 14 2011, 04:50 AM
Post #8


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



You can use a variable like this:

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>

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hermes
post May 14 2011, 05:14 AM
Post #9





Group: Members
Posts: 7
Joined: 7-March 11
Member No.: 14,061



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>


I'd like to use eval to set the whole code as one variable, but I have no idea how to do it.

This post has been edited by Hermes: May 14 2011, 05:15 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 14 2011, 10:38 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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>

blink.gif

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. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hermes
post May 14 2011, 10:43 AM
Post #11





Group: Members
Posts: 7
Joined: 7-March 11
Member No.: 14,061



We're almost there, but how can making special characters (backslashes) be done automatically?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 14 2011, 04:02 PM
Post #12


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Hermes @ May 14 2011, 05:43 PM) *

We're almost there

Are we? unsure.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hermes
post May 14 2011, 09:37 PM
Post #13





Group: Members
Posts: 7
Joined: 7-March 11
Member No.: 14,061



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 10:25 AM