<html>
<title>Onclick Event Propagation - RJM Programming - March, 2023</title>
<head>
<style>
details { display: flex; }
table { font-size: 12px; }
td { background-image: linear-gradient(#f0f0f0, #f2f2f2, #f4f4f4, #f6f6f6, #f8f8f8, #fafafa); }
</style>
<script type='text/javascript'>
// Thanks to Behind Me Dips Eternity, by Emily Dickinson
// Thanks to https://sites.google.com/site/examplesinpoetry/sestet-poetry-example-definition
var detsuffix='</summary>';
var blurbsuffix='</details>';
var detnum=0;
var noway=false;
var idc=0, jdc=0;
var idfound=false;
var blurb='';
var ilots=0;
var indxs=["button:0", "td:1", "tr:2", "tbody:3", "table:4", "body:5"];
var cols=["#f0f0f0", "#f2f2f2", "#f4f4f4", "#f6f6f6", "#f8f8f8", "#fafafa"];
// Thanks to https://bilingualkidspot.com/2018/04/23/popular-nursery-rhymes-for-kids-english/
var lotsofsix=["<br>O mistress mine, where are you roaming?;<br>It was many and many a year ago,;<br>Behind Me .. dips Eternity ..;<br>There was a farmer who had a dog,;<br>Five little ducks;<br>That well I deem each mountain, wood and plain,",
"O stay and hear! your true-love's coming ;In a kingdom by the sea,;Before Me .. Immortality ..;And Bingo was his name-O.;Went out one day;And river knows, what I from man conceal,",
"That can sing both high and low;That a maiden there lived whom you may know;Myself .. the Term between ..;B-I-N-G-O!;Over the hill and far away;What dreary hues my life's fond prospects dim.",
"Trip no further, pretty sweeting,;By the name of ANNABEL LEE;Death but the Drift of Eastern Gray,;B-I-N-G-O!;Mother duck said;Yet whate'er wild or savage paths I've ta'en,",
"Journey's end in lovers' meeting-- ;And this maiden she lived with no other thought;Dissolving into Dawn away,;B-I-N-G-O!;'Quack, quack, quack, quack.';Where'er I wander, love attends me still,",
"Every wise man's son doth know.;Than to love and be loved by me.;Before the West begin ..;And Bingo was his name-O!;But only four little ducks came back.;Soft whisp'ring to my soul, and I to him."];
function tableize(what) {
var dih=document.getElementById('results').innerHTML, trih='';
if (document.getElementById('results').innerHTML.indexOf('<table') == -1) {
what='<table cellpadding=20 cellspacing=20><tbody><tr id=mywhat><td>' + what + '</td></tr></tbody></table>';
} else if (!idfound) {
//alert('what=' + what + ' and ' + dih.replace('</tr>', '<td>' + what + '</td></tr>'));
if (1 == 1) {
trih=document.getElementById('mywhat').innerHTML;
//alert(": " + '<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary>');
//if (trih.indexOf('<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary>') == -1) {
// if (1 == 2) { alert('<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary> not found in ' + trih); }
//} else if (trih.replace('' + '<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary>','<summary></summary>') == trih.replace('' + '<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary>','<summary></summary>').replace(/\<td\>\<br\>\<br\>\<details[^>]+\>\<summary\>\<\/summary\>[^/]+\/details\>\<\/td\>/g, '')) {
// alert('<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary>' + ' ... did not find in ' + trih.replace('' + '<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary>','<summary></summary>'));
//}
//trih=trih.replace(/\<td\>\<br\>\<br\>\<details[^>]+\<summary\>\<\/summary\>[^/]+\/details\>\<\/td\>/g, '');
document.getElementById('mywhat').innerHTML='<td>' + what + '</td>' + trih.replace('' + '<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary>','<summary></summary>').replace(/\<td\>\<br\>\<br\>\<details[^>]+\<summary\>\<\/summary\>[^/]+\/details\>\<\/td\>/g, '');
trih=document.getElementById('mywhat').innerHTML;
if (trih != trih.replace(/\<td\>\<br\>\<br\>\<details[^>]+\>\<summary\>\<\/summary\>[^/]+\/details\>\<\/td\>/g, '')) {
trih=trih.replace(/\<td\>\<br\>\<br\>\<details[^>]+\>\<summary\>\<\/summary\>[^/]+\/details\>\<\/td\>/g, '');
document.getElementById('mywhat').innerHTML=trih;
}
//alert(document.getElementById('results').innerHTML);
} else {
document.getElementById('results').innerHTML=dih.replace('</tr>', '<td>' + what + '</td></tr>');
}
return '';
}
return what;
}
function moi(othis) {
var extras='';
if (othis.outerHTML.substring(1).split(' ')[0].split('>')[0] == 'details' || (othis.outerHTML.substring(1).split(' ')[0].split('>')[0] == 'body' && blurbsuffix == '') || noway) {
noway=true;
if (othis.outerHTML.substring(1).split(' ')[0].split('>')[0] == 'body') { noway=false; }
} else {
//alert(blurbsuffix + ' ... ' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0]);
if (('' + othis.id) != '') { extras=' ID=' + othis.id; idfound=true; } else {
if (eval('' + jdc) >= eval('' + lotsofsix.length)) { jdc=0; }
if (eval('' + detnum) > 0) {
if (lotsofsix[jdc].split(';')[idc].indexOf('<br>') != -1) {
if (document.getElementById('det' + eval(-1 + detnum))) {
document.getElementById('det' + eval(-1 + detnum)).open=false;
}
}
}
blurb+='<br>' + lotsofsix[jdc].split(';')[idc].replace('<br>', '<br><details onclick="noway=false;" id=det' + detnum + ' open><summary>') + detsuffix; detsuffix='';
}
detsuffix='';
if (othis.outerHTML.substring(1).split(' ')[0].split('>')[0] == 'body' && !idfound) {
var suf=tableize(blurb.replace('</summary><br>', '</summary>') + blurbsuffix);
if (suf != '') { document.getElementById('results').innerHTML+=suf; }
//alert(document.getElementById('results').innerHTML);
detsuffix='';
blurbsuffix='';
detnum++;
} else if (idfound) {
detsuffix='';
blurbsuffix='';
document.getElementById('results').innerHTML+=othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + extras + ' clicked.<br>';
}
jdc++;
}
}
</script>
</head>
<body onclick="moi(this);">
<h1>Sestet Examples</h1>
<h3>RJM Programming - March, 2023</h3>
<h4>Showing Onclick Event Propagation in Action</h4>
<h5>Thanks to <a target=_blank title='https://sites.google.com/site/examplesinpoetry/sestet-poetry-example-definition' href='https://sites.google.com/site/examplesinpoetry/sestet-poetry-example-definition'>Examples in Poetry</a> and <a target=_blank title='https://bilingualkidspot.com/2018/04/23/popular-nursery-rhymes-for-kids-english/' href='https://bilingualkidspot.com/2018/04/23/popular-nursery-rhymes-for-kids-english/'>Bilingual Kidspot</a> and Emily Dickinson and William Shakespeare</h5>
<table border=20 onclick="moi(this);">
<tbody onclick="moi(this);">
<tr onclick="moi(this);"><td onclick="moi(this);"><button onclick=" detsuffix='</summary>'; blurbsuffix='</details>'; idc=Math.floor(Math.random() * lotsofsix[0].split(';').length); jdc=0; blurb=''; idfound=false; moi(this);" title="Little Ditty">Sestet ...</button></td></tr>
</tbody>
</table>
<br><br>
<div id=results style='border: 5px dotted green;display:block;'>
</div>
</body>
</html>