Member Avatar for bharanidharanit

Hello sir,
I want to make a HTML page with the window splitted into two.
In the left side i will give the html coding and the right side i want output for that coding(during runtime).

  • 3 Contributors
  • 8 Replies
  • 102 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by orwell84

Dani AI

Generated

Short practical note based on the posts from and .

The snippet in this thread showed the preview working in IE but failing in Firefox. The root cause is a DOM lookup mismatch: the script is asking for an element id that does not exist, so standards-compliant browsers return null while older IE versions sometimes matched by name and hid the bug. Confirm this with the console and see the behavior explained in the getElementById reference (MDN).

Quick fixes and hardening steps:

  • Open the browser console first; a "null" or "cannot read property" error points to a missing id/element.
  • Make the textarea id and the id used in the script identical, and ensure the script runs after the DOM loads.
  • For live preview use the input event (or an event listener) instead of only a button click.
  • Do not inject arbitrary user HTML into the main DOM via innerHTML — that will execute scripts. Use an iframe with the srcdoc/sandbox options to isolate the preview (innerHTML, iframe). Use postMessage for safe two-way communication if needed (MDN postMessage).

For layout, prefer modern Flexbox over floats for a two-column split (Flexbox basics). If richer editing is desired, integrate an editor library (CodeMirror/Monaco) rather than a plain textarea. was not wrong to enjoy the thread — this is a classic cross-browser gotcha.

Recommended Answers

All 8 Replies

Member Avatar for orwell84

Do you want this to just show the HTML for a website you made, or have it be an interactive thing were someone puts in HTML code on the left and the output shows up on the right?

Member Avatar for bharanidharanit

I resolved this one. Here is the coding for that one.

<html>
	<head>
		<TITLE>My First Frame Page</TITLE>
		<script type="text/javascript">
			function PreviewHTML()
				{
				document.getElementById('preview').innerHTML = document.getElementById('source').value;
				}
		</script>
	</head>
	<body>
		<div style="float: left">
			<textarea id='htmlsource' name='source' rows='30' cols='50'></textarea>
			<br>
			<input type='button' value='Preview' onclick="javascript:PreviewHTML();">
		</div>
		<div id='preview' style="float: left"></div>
	</body>
</html>
Member Avatar for orwell84

Wait...what's this code doing?

Member Avatar for bharanidharanit

Wait...what's this code doing?

Its simply like Try it Editor! which i found in W3schools.com

Member Avatar for orwell84

Ok, because I tried the code and it didn't do that...

Member Avatar for bharanidharanit

Ok, because I tried the code and it didn't do that...

It doesnot work with other browsers except IE

Member Avatar for kanaku

Reading this thread made my day. :twisted:

Member Avatar for orwell84

It doesnot work with other browsers except IE

Ah, yes, I was using firefox

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.