Welcome to WebmasterWorld Guest from 54.163.61.66

Forum Moderators: open

Message Too Old, No Replies

Javascript and innerHtml

How do I get javascript to display in an innerHtml area?

     
12:03 pm on Oct 21, 2004 (gmt 0)

New User

10+ Year Member

joined:Oct 21, 2004
posts:3
votes: 0


Hello,

I am trying to illustrate what a snippet of javascript will look like when displayed on a webpage. It is for an assignment, and I must use innerHtml.

I am using a text area to input the javascript. I use the onChange() function for the text field to send the value of the text field to a javascript function which then sets the innerHtml of a portion of a table.

If I just type some text (not javascript) into the textbox, the function works fine and displays the text. However, it will not display the javascript code results.

Any suggestions on how to do this simply and properly?

Thanks in advance

Daniel

9:08 pm on Oct 22, 2004 (gmt 0)

New User

10+ Year Member

joined:Oct 13, 2004
posts:7
votes: 0


Maybe u can output it to a iframe?

just a suggestion!

1:34 am on Oct 23, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2004
posts:1181
votes: 0


"javascript code results"? Do you mean the text of the code or the results of code execution? innerHTML isn't going to force the execution of a script, but if you just want to print the script as text start the tag with the character entity, &lt; rather than an actual <
5:13 am on Oct 24, 2004 (gmt 0)

New User

10+ Year Member

joined:Oct 21, 2004
posts:3
votes: 0


Hi,

Sorry, maybe I wasn't so clear. Yes, I need to force the innerHtml to display the javascript code results. For example, I would need the following:

<script type="text/language>
<!--

document.writeln("Hello");

// -->
</script>

to appear in the innerHtml section as:

Hello

Right now all I get is a void space. How do I force the innerHTML to produce the results of the javascript?

Thanks again.

Daniel

12:27 pm on Oct 24, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2004
posts:1181
votes: 0


You don't get innerHTML to force JavaScript execution; it isn't what innerHTML does. Although, innerHTML won't force the JavaScript to execute, but you don't need it to. The innerHTML replaces the document.write() in your example, not the variable manipulations. What you need is like this:

var hi="Hello";
document.getElementById("outputTarget").innerHTML=hi;

7:37 am on Oct 25, 2004 (gmt 0)

New User

10+ Year Member

joined:Oct 21, 2004
posts:3
votes: 0


Hi again. Thanks for the info. My apologies if I am frustrating you.

My assignment specifically states that I have to allow a user to test and display their javascript code using innerHTML. But you are saying this is not possible as the innerHTML will not force the execution of the code. Is there a different solution? In the body of my HTML page, I have similar code to what you posted. Let me know what you think.

------------> Contained within body of HTML page:

<script type="text/javascript">
function updateText(){
var string = test.inputText.value;
if (document.getElementById)
document.getElementById("resultSpace").innerHTML = string;
}
</script>

<div align="left" id="resultSpace">
<script type="text/javascript">
document.writeln("Your results are displayed here.");
</script>
</div>

-------------------------> User input on web page.

<script type="text/javascript">
document.writeln("Hello");
</script>

2:14 am on Oct 26, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2004
posts:1181
votes: 0


I don't, offhand, see any problems with your code, though I'm not sure it would do much. Are you saying your assignment is to provide the means to type in code, then execute it with innerHTML? That doesn't make a lot of sense, since, as I mentioned, iH doesn't cause the code to execute.

A more direct way to achieve code execution would be to open a new window that has had the code written to it with document.write(), when the page is built. Scripts are actually only loaded when the page is loaded, though execution of functions can be made dependent on some other event.

4:33 pm on Oct 26, 2004 (gmt 0)

New User

10+ Year Member

joined:Oct 13, 2004
posts:7
votes: 0


As i can c u want the following:

______________
¦Input..Output ¦
¦ ______ _____ ¦
¦¦.....¦¦.....¦¦
¦¦.....¦¦.....¦¦
¦¦..X..¦¦..Y..¦¦
¦¦.....¦¦.....¦¦
¦¦_____¦¦_____¦¦
¦______________¦

So the x-area is where u type code and
the y-area is where u want it displayed.

I would make x a textarea so the user can edit.
And make x an iframe so u can use document.write.

Then make a script that converts the input in x
to output in y. And add a button to execute that
script and your done.

5:02 pm on Oct 26, 2004 (gmt 0)

New User

10+ Year Member

joined:Oct 13, 2004
posts:7
votes: 0


Something like this:

<html>
<head>
<title>HomeWork 1.0</title>
</head>
<body>

<script type="text/javascript"><!--

function Txt2Frame() {
document.frames.my_frame.document.open();
document.frames.my_frame.document.write('<html><head><title>My_Frame</title></head><body>');
document.frames.my_frame.document.write(Txt2Frame.arguments[0]);
document.frames.my_frame.document.write('</body></html>');
document.frames.my_frame.document.close();
}

//--></script>

<form name="test_form">
<textarea onChange="Javascript:Txt2Frame(CharT.value);" name="CharT" cols="10" rows="5"></textarea>
</form>

<iframe frameborder="1" scrolling="0" name="my_frame" width="300" height="55"></iframe>

</body>
</html>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members