<html>
<head>
<title>Using Writeln - RJM Programming - March, 2026</title>
<script type=text/javascript>
var woo=null, pcontent='', lastc='';
var okdo=null;
function displaypopup(owhat) {
var mytitle=document.title;
if (!owhat) {
owhat=document.getElementById('myta');
}
if (okdo) { owhat=okdo; }
switch(owhat.id) {
case 'myta':
mytitle+=' ... textarea';
if (owhat.value == '') {
pcontent='';
} else {
pcontent=owhat.outerHTML.replace('></textarea>','>' + owhat.value + '</textarea>');
}
break;
case 'mydiv':
mytitle+=' ... div';
if (owhat.innerHTML.indexOf('<img src="data:') != -1) {
//alert(6546);
owhat.innerHTML=owhat.innerHTML.replace('<img src="data:', '<img style=object-fit:contain;width:100%;height:100%; src="data:');
//alert(owhat.innerHTML);
}
if (owhat.innerHTML == '') {
pcontent='';
} else {
pcontent=owhat.outerHTML;
}
break;
default:
break;
}
if (woo) {
if (pcontent.trim() != '') {
if (!woo.closed && lastc != pcontent) {
woo.close();
woo=null;
}
} else {
setTimeout(function(){ woo.focus(); }, 2000);
}
}
if (pcontent.trim() != '' && lastc != pcontent) {
lastc=pcontent;
woo=window.open('','_blank','top=50,left=50,width=600,height=600');
if (document.getElementById('mysel').value.toLowerCase() == 'write') {
woo.document.write('<html><head>><title>' + mytitle + '</title></head><body styXle=width:fit-content;>' + pcontent.replace(' style=',' data-style=') + '</body></html>');
} else {
woo.document.writeln('<html><head><title>' + mytitle + '</title></head><body styXle=width:fit-content;>' + pcontent.replace(' style=',' data-style=') + '</body></html>');
}
woo.addEventListener("load", function() {
var width = woo.document.body.scrollWidth;
var height = woo.document.body.scrollHeight;
woo.resizeTo(width, height);
});
}
}
</script>
<body>
<h1>Using <select id=mysel><option value=writeln'>Writeln</option><option value=write'>Write</option></select></h1>
<h3>RJM Programming - March, 2026</h3>
<table style='width:80%;'><tr><th>Textarea</th><th style=width:40%;>Div</th></tr><tr><td>
<textarea onkeydown="if (okdo != document.getElementById('myta')) { lastc=''; } okdo=document.getElementById('myta');" id=myta onpaste=displaypopup(this); onblur=displaypopup(this); style='width:90%;height:300px;'></textarea>
</td><td>
<div onkeydown="if (okdo != document.getElementById('mydiv')) { lastc=''; } okdo=document.getElementById('mydiv');" id=mydiv contenteditable=true onpaste=displaypopup(this); onblur=displaypopup(this); style='border:1px solid black;width:90%;height:300px;'></div>
</td></tr></table>
<button onclick=displaypopup(this); style=background-color:yellow;>Display</button>
</body>
</html>