{"id":51431,"date":"2021-01-15T03:01:10","date_gmt":"2021-01-14T17:01:10","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51431"},"modified":"2021-01-14T19:34:26","modified_gmt":"2021-01-14T09:34:26","slug":"multipurpose-buttons-onclick-event-logic-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/multipurpose-buttons-onclick-event-logic-tutorial\/","title":{"rendered":"Multipurpose Buttons Onclick Event Logic Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Multipurpose Buttons Onclick Event Logic Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons_onclick.jpg\" title=\"Multipurpose Buttons Onclick Event Logic Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Multipurpose Buttons Onclick Event Logic Tutorial<\/p><\/div>\n<p>The web would be a very boring woooooorrrrrlllllldddd without onclick logics.  The number of thoughts regarding what to do when you click on an HTML element are more than the number of grains of sand on Bondi Beach, or the Sahara Desert.  Yesterday&#8217;s <a title='Multipurpose Buttons Emoji Links Tutorial' href='#mbelt'>Multipurpose Buttons Emoji Links Tutorial<\/a> had a static arrangement as far as &#8220;onclick&#8221; event logic is concerned.<\/p>\n<p>Today&#8217;s job is threefold in purpose &#8230;<\/p>\n<ul>\n<li>facilitate a means by which a user can define onclick logic set(s) &#8230; and we&#8217;ve chosen for this &#8230;<\/li>\n<li>ondblclick event for non-mobile and ontouchend event for mobile &#8230; and have it that &#8230;<\/li>\n<li>renavigating back after a content change these onclick logics get restored, as required<\/li>\n<\/ul>\n<p>Can you define an onclick event logic dynamically?  You bet!   You can addEventListener or rewrite an element within a nesting container element (that often being a div element) or you can go something like (with Javascript) &#8230;<\/p>\n<p><code><br \/>\n document.getElementById('ix').onclick=function(event){ alert('We have clicked element called ' + ('' + event.target.id)); }<br \/>\n<\/code><\/p>\n<p>The nature of this is that it gets unwieldy to define the codeline above using some Javascript eval arrangement.  Rather we allow the user definition to move along with the HTML element.  Can you think how?  Yes, global attributes, as per the Javascript code snippet, where &#8220;newcl&#8221; contains the user onclick event logic entered as they were prompted for it &#8230;<\/p>\n<p><code><br \/>\n     if (newcl.trim().indexOf('function') == 0) {<br \/>\n     aspan.setAttribute('data-onclick', (newcl.trim() + '~`').replace('}~`','').replace('~`','').substring(eval(1 + newcl.trim().indexOf('{'))) + String.fromCharCode(9));<br \/>\n     aspan.onclick=function(event){ eval(event.target.getAttribute('data-onclick'));  }<br \/>\n     } else {<br \/>\n     aspan.setAttribute('data-onclick', newcl + String.fromCharCode(9));<br \/>\n     aspan.onclick=function(event){ eval(event.target.getAttribute('data-onclick'));  }<br \/>\n     }<br \/>\n<\/code><\/p>\n<p>Please see this with the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html-----GETME\" title=\"multipurpose_buttons.html\">fifth draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html-----GETME\" title=\"multipurpose_buttons.html\">multipurpose_buttons.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/multipurpose-buttons-emoji-links-tutorial\/'>Multipurpose Buttons Onclick Event Logic Tutorial<\/a>.<\/p-->\n<hr>\n<p id='mbelt'>Previous relevant <a target=_blank title='Multipurpose Buttons Emoji Links Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/multipurpose-buttons-emoji-links-tutorial\/'>Multipurpose Buttons Emoji Links Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Multipurpose Buttons Media Content Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons_emojis.jpg\" title=\"Multipurpose Buttons Media Content Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Multipurpose Buttons Emoji Links Tutorial<\/p><\/div>\n<p>We&#8217;re adding emojis into the mix of <a title='Multipurpose Buttons Media Content Tutorial' href='#mbmct'>Multipurpose Buttons Media Content Tutorial<\/a> functionality today.  We often describe such additional functionality as an &#8220;emoji button&#8221; but for the purposes of clarity, today, we describe &#8230;<\/p>\n<ul>\n<li>&#8220;a&#8221; links &#8230; with a &#8230;<\/li>\n<li>emoji innerHTML (ie. look) &#8230; eg. &amp;#127381; &#127381; &#8220;New&#8221; emoji we&#8217;re using as a &#8220;Restart&#8221; piece of functionality &#8230; button-like, in that they have styling &#8230;<\/li>\n<li>style=&#8221;cursor:pointer;text-decoration:none;&#8221; &#8230; lacking the underlining &#8220;a&#8221; links typically have<\/li>\n<\/ul>\n<p> &#8230; as new &#8220;emoji links&#8221; &#8230; for &#8230;<\/p>\n<ul>\n<li>New (restart) &#127381;<\/li>\n<li>Email &#128231;<\/li>\n<li>Circular borders &#11093;<\/li>\n<li>Glow &#127775;<\/li>\n<\/ul>\n<p> &#8230; as well as some new functionality that when you click outside characters and media within the &#8220;button&#8221; elements, a new popup window hones in on this clicked element.<\/p>\n<p>All this can be set and moves with the web application as it recalls itself.<\/p>\n<p>See this with the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html----GETME\" title=\"multipurpose_buttons.html\">fourth draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html----GETME\" title=\"multipurpose_buttons.html\">multipurpose_buttons.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/multipurpose-buttons-emoji-links-tutorial\/'>Multipurpose Buttons Emoji Links Tutorial<\/a>.<\/p-->\n<hr>\n<p id='mbmct'>Previous relevant <a target=_blank title='Multipurpose Buttons Media Content Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/multipurpose-buttons-media-content-tutorial\/'>Multipurpose Buttons Media Content Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Multipurpose Buttons Media Content Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons_media.jpg\" title=\"Multipurpose Buttons Media Content Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Multipurpose Buttons Media Content Tutorial<\/p><\/div>\n<p>Were you around for the <a target=_blank title='Window SessionStorage Client Versus Server Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/window-sessionstorage-client-versus-server-tutorial\/' title='Window SessionStorage Client Versus Server Tutorial'>Window SessionStorage Client Versus Server Tutorial<\/a>?  We found a place where we could differentiate between &#8230;<\/p>\n<ul>\n<li><a target=_blank title='window.sessionStorage info' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp'>sessionStorage<\/a> &#8230; and &#8230;<\/li>\n<li><a target=_blank title='window.localStorage info' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a><\/li>\n<\/ul>\n<p> &#8230; regarding the combination of &#8230;<\/p>\n<ul>\n<li><a target=_blank title='window.sessionStorage info' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp'>sessionStorage<\/a>&#8216;s &#8220;ephemeral&#8221; storage suits &#8230; as well as a mechanism to &#8230;<\/li>\n<li>not need (ie. be a functional replacement for) HTML form method=POST <font size=1>(instead, using method=GET with extra argument being the sessionStorage name used <sup>(for that tiny period of time)<\/sup>)<\/font> for large amounts of data that normally require action=[somePHPserverPage]<\/li>\n<\/ul>\n<p> &#8230; and so can remain a totally client facing web application even though we are doing similar work to what we did with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/dynamic-timer-web-browser-reminder-media-tutorial\/' title='Dynamic Timer Web Browser Reminder Media Tutorial'>Dynamic Timer Web Browser Reminder Media Tutorial<\/a> when we added media file browsing into the mix by starting to interface with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html----------------GETME\">client_browsing.htm<\/a>&#8216;s File API talents within an HTML iframe &#8220;child&#8221; element.<\/p>\n<p>And so on top of the progress up to yesterday&#8217;s <a title='Multipurpose Buttons Content Tutorial' href='#mbct'>Multipurpose Buttons Content Tutorial<\/a>, today we allow users to be able to append &#8230;<\/p>\n<ul>\n<li>img (image)<\/li>\n<li>audio<\/li>\n<li>video<\/li>\n<\/ul>\n<p> &#8230; media data contents within the &#8220;button&#8221; <font size=1>(but not input type=button)<\/font> element buttons.<\/p>\n<p>Yet again, feel free to try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html---GETME\" title=\"multipurpose_buttons.html\">third draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html---GETME\" title=\"multipurpose_buttons.html\">multipurpose_buttons.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html\" title=\"Click picture\">live run<\/a> link to see what we mean by the use of sessionStorage to store (for that tiny length of time) and restore of these media data sets just within the &#8220;client facing wooooooorrrrrrllllllldddd&#8221;.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/multipurpose-buttons-media-content-tutorial\/'>Multipurpose Buttons Media Content Tutorial<\/a>.<\/p-->\n<hr>\n<p id='mbct'>Previous relevant <a target=_blank title='Multipurpose Buttons Content Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/multipurpose-buttons-content-tutorial\/'>Multipurpose Buttons Content Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Multipurpose Buttons Content Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons_your_content.jpg\" title=\"Multipurpose Buttons Content Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Multipurpose Buttons Content Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s proof of concept &#8220;Multipurpose Buttons&#8221; web application of <a title='Multipurpose Buttons Primer Tutorial' href='#mbpt'>Multipurpose Buttons Primer Tutorial<\/a> was pretty typical of many &#8220;proof of concept&#8221;s out there, not rocking the boat with the messy woooooorrrrllllllddd of what a user might enter as the &#8220;content&#8221; of those buttons.  But that &#8220;proof of concept&#8221; idea is important to establish &#8230;<\/p>\n<ul>\n<li>what is crucial &#8230; as well as &#8230;<\/li>\n<li>what is important<\/li>\n<li>what needs attention when genericizing (which is today&#8217;s work) &#8230; and up above all this &#8230;<\/li>\n<li>whether the whole concept is feasible for controlled data content<\/li>\n<li>whether the whole concept is feasible for user entered data content<\/li>\n<\/ul>\n<p> &#8230; and happily, though there are some cross-browser tweaks <font size=1>(always a bit of a genericization &#8220;sour puss&#8221; for us)<\/font>, we think that last option above is indeed possible.  The whole exercise has certainly borne out how much more powerful is the HTML &#8220;button&#8221; element for this multipurpose thinking, than is the &#8220;input type=button&#8221; (older) HTML element type, that &#8220;button&#8221; element now truly a &#8220;container&#8221; type of element <font size=1>(for us, the HTML elements where the property <i>innerHTML<\/i> has a proper meaning)<\/font>.<\/p>\n<p>Proof of this is that this genericization drive today hardly concerned itself with any HTML &#8220;button&#8221; element concerns, rather it was a constant battle to make the HTML &#8220;input type=button&#8221; &#8220;hang in there&#8221;.<\/p>\n<p>Okay then, if we are allowing a &#8220;vertical dimension&#8221; to our contents and we offer you the choice of &#8230;<\/p>\n<ul>\n<li>textarea &#8230; versus &#8230;<\/li>\n<li>div contenteditable=true<\/li>\n<\/ul>\n<p> &#8230; as your user interaction HTML element of choice, which do you think is better?  Well, our choice was a no brainer, as we had decided the reasoning would be &#8230;<\/p>\n<ul>\n<li>encase &#8230;<\/li>\n<li>whatever element above is used &#8230;<\/li>\n<li>within an HTML form action=[here&#8217;sLookingAtYouKid] method=GET navigational arrangement<\/li>\n<\/ul>\n<p> &#8230; as our means of passing through user interaction findings.  Well, this rules out &#8220;div contenteditable=true&#8221; as the &#8220;name&#8221; property of HTML &#8220;form&#8221; elements map from that element&#8217;s &#8220;value&#8221; property, something a &#8220;div contenteditable=true&#8221; lacks but a &#8220;textarea&#8221; element excels at <font size=1>(as well as its &#8220;innerHTML&#8221; initializing of data (ie. value) talents, as well)<\/font>.<\/p>\n<p>This genericization drive also taught us that even if a monospaced font such as Courier New is enforced for the HTML &#8220;input type=button&#8221; there can be different &#8220;display looks&#8221; between data containing &#8230;<\/p>\n<ul>\n<li>space (&#8221; &#8220;) character (as whitespace) &#8230; versus &#8230;<\/li>\n<li>non-breaking space (&#8220;&amp;nbsp;&#8221;) character<\/li>\n<\/ul>\n<p> &#8230; the latter crucial for us to even up record lengths of the underlying &#8220;display data&#8221; used to make the &#8220;input type=button&#8221; elements &#8220;look&#8221; as the user would have intended, meaning that the non-breaking whitespace character (as one character) above is used for &#8220;display data&#8221; that is a &#8220;square block of text&#8221; so that &#8220;display:block&#8221; can work with CSS &#8220;font-size&#8221; and &#8220;width&#8221; and &#8220;height&#8221; to facilitate this HTML &#8220;input type=button&#8221; display look.<\/p>\n<p>As you&#8217;d expect, coming back (ie. callback) via &#8220;action=[here&#8217;sLookingAtYouKid]&#8221; form navigation above means we need a document.body &#8220;onload&#8221; event function as way below to set up display settings and the creation of that &#8220;onclick&#8221; logic eval<font size=1>ed<\/font> &#8220;if logic&#8221; setting the global var<\/font size=1>iable<\/font> &#8220;gval&#8221; &#8230;<\/p>\n<p><code><br \/>\n       if (cnum != (\"1 2 3 \" + String.fromCharCode(10) + \"4 5 6 \" + String.fromCharCode(10) + \"7 8 9 \")) {  \/\/ true user interaction data here<br \/>\n         gval='';<br \/>\n         eval(ifstr);   \/\/ for Horizontal and Vertical input type=button ... just Horizontal uses \"ifstrone\" variable instead<br \/>\n         if (gval != '') { setTimeout(agval, 1000); }<br \/>\n       }<br \/>\n<\/code><\/p>\n<p> &#8230; is set up at global initializations followed by the &#8220;function onl&#8221; document.body &#8220;onload&#8221; event logic below &#8230;<\/p>\n<p><code><br \/>\n var gval='';<br \/>\n var cnum=location.search.split('content=')[1] ? decodeURIComponent(location.search.split('content=')[1].split('&')[0]).replace(\/\\+\/g,' ') : \"1 2 3 \" + String.fromCharCode(10) + \"4 5 6 \" + String.fromCharCode(10) + \"7 8 9 \";<br \/>\n while (cnum.indexOf(' ' + String.fromCharCode(13) + String.fromCharCode(10)) != -1) {<br \/>\n   cnum=cnum.replace(' ' + String.fromCharCode(13) + String.fromCharCode(10), ' [13][10]');<br \/>\n }<br \/>\n while (cnum.indexOf(' ' + String.fromCharCode(10) + String.fromCharCode(13)) != -1) {<br \/>\n   cnum=cnum.replace(' ' + String.fromCharCode(10) + String.fromCharCode(13), ' [10][13]');<br \/>\n }<br \/>\n while (cnum.indexOf(' ' + String.fromCharCode(10)) != -1) {<br \/>\n   cnum=cnum.replace(' ' + String.fromCharCode(10), ' [10]');<br \/>\n }<br \/>\n while (cnum.indexOf(' ' + String.fromCharCode(13)) != -1) {<br \/>\n   cnum=cnum.replace(' ' + String.fromCharCode(13), ' [13]');<br \/>\n }<br \/>\n<br \/> <br \/>\n while (cnum.indexOf(String.fromCharCode(13) + String.fromCharCode(10)) != -1) {<br \/>\n   cnum=cnum.replace(String.fromCharCode(13) + String.fromCharCode(10), ' [13][10]');<br \/>\n }<br \/>\n while (cnum.indexOf(String.fromCharCode(10) + String.fromCharCode(13)) != -1) {<br \/>\n   cnum=cnum.replace(String.fromCharCode(10) + String.fromCharCode(13), ' [10][13]');<br \/>\n }<br \/>\n while (cnum.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n   cnum=cnum.replace(String.fromCharCode(10), ' [10]');<br \/>\n }<br \/>\n while (cnum.indexOf(String.fromCharCode(13)) != -1) {<br \/>\n   cnum=cnum.replace(String.fromCharCode(13), ' [13]');<br \/>\n }<br \/>\n cnum=cnum.replace(\/\\[13\\]\\[10\\]\/g, String.fromCharCode(13) + String.fromCharCode(10));<br \/>\n cnum=cnum.replace(\/\\[10\\]\\[13\\]\/g, String.fromCharCode(10) + String.fromCharCode(13));<br \/>\n cnum=cnum.replace(\/\\[13\\]\/g, String.fromCharCode(13));<br \/>\n cnum=cnum.replace(\/\\[10\\]\/g, String.fromCharCode(10));<br \/>\n<br \/>\n var origcnumx=cnum; \/\/.trim();<br \/>\n var cnumx=cnum; \/\/.trim();<br \/>\n<br \/>\n function onl() {<br \/>\n       var ih='', jh=0, kh=0, lh=0, onelh=0, zero=0, eight=0;<br \/>\n       maxlh=0;<br \/>\n       if (cnum != (\"1 2 3 \" + String.fromCharCode(10) + \"4 5 6 \" + String.fromCharCode(10) + \"7 8 9 \")) {  \/\/ true user interaction data here<br \/>\n         var ccnums=[];<br \/>\n         if (origcnumx.indexOf(String.fromCharCode(13) + String.fromCharCode(10)) != -1) {<br \/>\n         ccnums=origcnumx.split(String.fromCharCode(13) + String.fromCharCode(10));<br \/>\n         document.getElementById('content').rows='' + ccnums.length;<br \/>\n         } else if (origcnumx.indexOf(String.fromCharCode(10) + String.fromCharCode(13)) != -1) {<br \/>\n         ccnums=origcnumx.split(String.fromCharCode(10) + String.fromCharCode(13));<br \/>\n         document.getElementById('content').rows='' + ccnums.length;<br \/>\n         } else if (origcnumx.indexOf(String.fromCharCode(13)) != -1) {<br \/>\n         ccnums=origcnumx.split(String.fromCharCode(13));<br \/>\n         document.getElementById('content').rows='' + ccnums.length;<br \/>\n         } else {<br \/>\n         ccnums=origcnumx.split(String.fromCharCode(10));<br \/>\n         document.getElementById('content').rows='' + ccnums.length;<br \/>\n         }<br \/>\n         \/\/alert(ccnums.length);<br \/>\n         for (jh=1; jh&lt;=ccnums.length;  jh++) {<br \/>\n           if (eval('' + ccnums[eval(-1 + jh)].length) &gt; eval('' + maxlh)) { maxlh=ccnums[eval(-1 + jh)].length; }<br \/>\n         }<br \/>\n         for (jh=1; jh&lt;=cnumx.length;  jh++) {<br \/>\n           ih+=\"&lt;span class=bxandy onclick='gval=this.innerHTML;'&gt;\" + cnumx.substring(eval(-1 + jh)).substring(0,1) + \"&lt;\/span&gt;\";<br \/>\n           \/\/if (lh == 0) { alert(cnumx.substring(eval(-1 + jh)).substring(0,1));  }<br \/>\n              if ((cnumx + ' ').substring(eval(0 + jh)).substring(0,1)) {<br \/>\n                zero=eight;<br \/>\n                if (eight &gt; 0) { eight--; }<br \/>\n              } else {<br \/>\n                zero=0;<br \/>\n              }<br \/>\n              if (ifstrone.indexOf('if ') == -1) {<br \/>\n               ifstrone+=\" if (eval(propx) &lt;= eval(\" + eval(1 + onelh) + \".\" + zero + \" \/ \" + cnumx.length + \")) { gval='\" + cnumx.substring(eval(-1 + jh)).substring(0,2) + \"'; } \";<br \/>\n             } else {<br \/>\n               ifstrone+=\" else if (eval(propx) &lt;= eval(\" + eval(1 + onelh) + \".\" + zero + \" \/ \" + cnumx.length + \")) { gval='\" + cnumx.substring(eval(-1 + jh)).substring(0,2) + \"'; } \";<br \/>\n             }<br \/>\n          if (ccnums.length == 1) {<br \/>\n             if (ifstr.indexOf('if ') == -1) {<br \/>\n               ifstr+=\" if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".\" + zero + \" \/ \" + maxlh + \")) { gval='\" + cnumx.substring(eval(-1 + jh)).substring(0,2) + \"'; } \";<br \/>\n             } else {<br \/>\n               ifstr+=\" else if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".\" + zero + \" \/ \" + maxlh + \")) { gval='\" + cnumx.substring(eval(-1 + jh)).substring(0,2) + \"'; } \";<br \/>\n             }<br \/>\n           } else {<br \/>\n             if (ifstr.indexOf('if ') == -1) {<br \/>\n               ifstr+=\" if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".\" + zero + \" \/ \" + maxlh + \") && eval(propy) &lt;= eval(\" + eval(1 + kh) + \".0 \/ \" + ccnums.length + \")) { gval='\" + cnumx.substring(eval(-1 + jh)).substring(0,2) + \"'; } \";<br \/>\n             } else {<br \/>\n               ifstr+=\" else if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".\" + zero + \" \/ \" + maxlh + \") && eval(propy) &lt;= eval(\" + eval(1 + kh) + \".0 \/ \" + ccnums.length + \")) { gval='\" + cnumx.substring(eval(-1 + jh)).substring(0,2) + \"'; } \";<br \/>\n             }<br \/>\n           }<br \/>\n           lh++;<br \/>\n           onelh++;<br \/>\n           if (lh == ccnums[kh].length && kh &lt; ccnums.length) {<br \/>\n             if (lh &lt; maxlh) {<br \/>\n               while (lh &lt; maxlh) {<br \/>\n                ih+=\"&lt;span class=bxandy onclick='gval=this.innerHTML;'&gt; &lt;\/span&gt;\";<br \/>\n           if (ccnums.length == 1) {<br \/>\n             if (ifstr.indexOf('if ') == -1) {<br \/>\n               ifstr+=\" if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".0 \/ \" + maxlh + \")) { gval=' '; } \";<br \/>\n             } else {<br \/>\n               ifstr+=\" else if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".0 \/ \" + maxlh + \")) { gval=' '; } \";<br \/>\n             }<br \/>\n           } else {<br \/>\n             if (ifstr.indexOf('if ') == -1) {<br \/>\n               ifstr+=\" if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".0 \/ \" + maxlh + \") && eval(propy) &lt;= eval(\" + eval(1 + kh) + \".0 \/ \" + ccnums.length + \")) { gval=' '; } \";<br \/>\n             } else {<br \/>\n               ifstr+=\" else if (eval(propx) &lt;= eval(\" + eval(1 + lh) + \".0 \/ \" + maxlh + \") && eval(propy) &lt;= eval(\" + eval(1 + kh) + \".0 \/ \" + ccnums.length + \")) { gval=' '; } \";<br \/>\n             }<br \/>\n           }<br \/>\n                lh++;<br \/>\n               }<br \/>\n             }<br \/>\n             ih+=\"&lt;br&gt;\";<br \/>\n             kh++;<br \/>\n             lh=0;<br \/>\n           }<br \/>\n         }<br \/>\n         if (maxlh == 0) { maxlh=lh; }<br \/>\n         \/\/alert(ifstrone);<br \/>\n         document.getElementById('ix').style.marginLeft='1px';<br \/>\n         document.getElementById('ix').style.marginRight='3px';<br \/>\n         if (\/chrome\/i.test( navigator.userAgent )) {<br \/>\n         document.getElementById('ix').style.width='' + Math.round(eval(0 + cnumx.length) * 8.0) + 'px';<br \/>\n         document.getElementById('ixandy').style.width='' + Math.round(eval(0 + maxlh) * 7.5) + 'px';<br \/>\n         } else {<br \/>\n         document.getElementById('ix').style.width='' + Math.round(eval(0 + cnumx.length) * 6.75) + 'px';<br \/>\n         document.getElementById('ixandy').style.width='' + Math.round(eval(0 + maxlh) * 8.0) + 'px';<br \/>\n         }<br \/>\n         document.getElementById('ixandy').style.height='' + Math.floor(eval(eval('' + ccnums.length) * 14) + 4) + 'px';<br \/>\n         document.getElementById('bxandy').innerHTML=ih.replace(\/\\&gt;\\ \\&lt;\\\/span\\&gt;\/g, '&gt;&amp;nbsp;&lt;\/span&gt;');<br \/>\n         document.getElementById('bx').innerHTML=ih.replace(\/\\&lt;br\\&gt;\/g,'');<br \/>\n         document.getElementById('ix').title='Please click a character.';<br \/>\n         document.getElementById('ixandy').title='Please click a character.';<br \/>\n      } else {<br \/>\n         document.getElementById('ix').style.marginLeft='1px';<br \/>\n         document.getElementById('ix').style.marginRight='3px';<br \/>\n         if (\/chrome\/i.test( navigator.userAgent )) {<br \/>\n         document.getElementById('ix').style.width='' + Math.round(eval(0 + cnumx.length) * 8.0) + 'px';<br \/>\n         document.getElementById('ixandy').style.width='' + Math.round(eval(0 + 6) * 7.5) + 'px';<br \/>\n         } else {<br \/>\n         document.getElementById('ix').style.width='' + Math.round(eval(0 + cnumx.length) * 6.75) + 'px';<br \/>\n         document.getElementById('ixandy').style.width='' + Math.round(eval(0 + 6) * 8.0) + 'px';<br \/>\n         }<br \/>\n         document.getElementById('ixandy').style.height='' + Math.floor(eval(eval('' + '3') * 14) + 4) + 'px';<br \/>\n      }<br \/>\n }<br \/>\n<\/code><\/p>\n<p>So, feel free to &#8220;use&#8221; the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html--GETME\" title=\"multipurpose_buttons.html\">second draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html--GETME\" title=\"multipurpose_buttons.html\">multipurpose_buttons.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html\" title=\"Click picture\">live run<\/a> link to see what we mean.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/multipurpose-buttons-content-tutorial\/'>Multipurpose Buttons Content Tutorial<\/a>.<\/p-->\n<hr>\n<p id='mbpt'>Previous relevant <a target=_blank title='Multipurpose Buttons Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/multipurpose-buttons-primer-tutorial\/'>Multipurpose Buttons Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Multipurpose Buttons Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.jpg\" title=\"Multipurpose Buttons Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Multipurpose Buttons Primer Tutorial<\/p><\/div>\n<p>At this blog we go <a target=_blank title='?' href='https:\/\/www.google.com\/search?q=hard+quiz&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=hard+quiz&#038;aqs=chrome..69i57j69i60j69i65l3j69i61j69i60l2.1883j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>hard<\/a> at spruiking the qualities of HTML dropdown (ie. select) elements to do with &#8230;<\/p>\n<ul>\n<li>the display brevity &#8230; as well as &#8230;<\/li>\n<li>richness of content possibilities<\/li>\n<\/ul>\n<p> &#8230; they can infer upon a webpage.  At the expense of &#8220;the display brevity&#8221; we are keen to use a dropdown attribute &#8220;size&#8221; set so as to display all the content on the screen where &#8230;<\/p>\n<ul>\n<li>it can sensibly fit on the screen &#8230; and &#8230;<\/li>\n<li>it does not matter that mobile platforms do not recognize the &#8220;size&#8221; attribute &#8220;vertical expansion&#8221; of a dropdown that takes place on non-mobile platforms<\/li>\n<\/ul>\n<p>Today, though, we&#8217;re here to show you that, with a bit of Javascript event logic, a &#8230;<\/p>\n<ul>\n<li>button element &#8230; even better than an &#8230;<\/li>\n<li>input type=button element<\/li>\n<\/ul>\n<p> &#8230; can go some of the way to mimicking those qualities we like so much above, doing even better than the x (ie. horizontal) dimension limit of one that a dropdown has, to be able to fit more data content in horizontally, as a display mechanism you might say has &#8220;the display brevity&#8221; combined with content complexity you are after.<\/p>\n<p>We wrote a proof of concept <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html-GETME\" title=\"multipurpose_buttons.html\">multipurpose_buttons.html<\/a>, featuring the one Javascript &#8220;onclick&#8221; logic function as per &#8230;<\/p>\n<p><code><br \/>\n var x=0, y=0, lastx=0,lasty=0;<br \/>\n var propx=0.0, propy=0.0;<br \/>\n<br \/>\n function iclicked(event) {<br \/>\n   var rectis=null, isok=true;;<br \/>\n   if (('' + event.target.id) == 'bxandy') {<br \/>\n       setTimeout(agval, 1000);<br \/>\n   } else if (('' + event.target.className) == 'bxandy') {<br \/>\n       setTimeout(agval, 1000);<br \/>\n   } else if (('' + event.target.id) == 'bx') {<br \/>\n       setTimeout(agval, 1000);<br \/>\n   } else if (('' + event.target.className) == 'bx') {<br \/>\n       setTimeout(agval, 1000);<br \/>\n   } else if (('' + event.target.id) == 'ixandy') {<br \/>\n       rectis=event.target.getBoundingClientRect();<br \/>\n       if (event.touches) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/24567441\/how-do-i-detect-two-fingers-at-touchstart-in-javascript<br \/>\n         if (event.touches.length &gt; 1) {  isok=false; }<br \/>\n       }<br \/>\n       if (isok) {<br \/>\n       if (event.touches) {<br \/>\n         var touches1 = event.changedTouches;<br \/>\n         var first1 = touches1[0];<br \/>\n         x = first1.clientX;<br \/>\n         y = first1.clientY;<br \/>\n       } else if (event.clientX || event.clientY) {<br \/>\n       x = event.clientX; \/\/ - elemLeft;<br \/>\n       y = event.clientY; \/\/ - elemTop;<br \/>\n       } else {<br \/>\n       x = event.pageX; \/\/ - elemLeft;<br \/>\n       y = event.pageY; \/\/ - elemTop;<br \/>\n       }<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       propx=eval(eval(x - rectis.x) \/ rectis.width);<br \/>\n       propy=eval(eval(y - rectis.y) \/ rectis.height);<br \/>\n       if (eval(propx) &lt;= 0.333 && eval(propy) &lt;= 0.333) {<br \/>\n         gval='1';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &gt;= 0.666 && eval(propy) &lt;= 0.333) {<br \/>\n         gval='3';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propy) &lt;= 0.333) {<br \/>\n         gval='2';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.333 && eval(propy) &lt;= 0.666) {<br \/>\n         gval='4';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &gt;= 0.666 && eval(propy) &lt;= 0.666) {<br \/>\n         gval='6';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propy) &lt;= 0.666) {<br \/>\n         gval='5';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.333) {<br \/>\n         gval='7';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &gt;= 0.666) {<br \/>\n         gval='9';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else {<br \/>\n         gval='8';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       }<br \/>\n       }<br \/>\n   } else if (('' + event.target.id) == 'ix') {<br \/>\n       rectis=event.target.<a target=_blank title='getBoundingClientRect' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect()<\/a>;<br \/>\n       if (event.touches) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/24567441\/how-do-i-detect-two-fingers-at-touchstart-in-javascript<br \/>\n         if (event.touches.length &gt; 1) {  isok=false; }<br \/>\n       }<br \/>\n       if (isok) {<br \/>\n       if (event.touches) {<br \/>\n         var touches1 = event.changedTouches;<br \/>\n         var first1 = touches1[0];<br \/>\n         x = first1.clientX;<br \/>\n         y = first1.clientY;<br \/>\n       } else if (event.clientX || event.clientY) {<br \/>\n       x = event.clientX; \/\/ - elemLeft;<br \/>\n       y = event.clientY; \/\/ - elemTop;<br \/>\n       } else {<br \/>\n       x = event.pageX; \/\/ - elemLeft;<br \/>\n       y = event.pageY; \/\/ - elemTop;<br \/>\n       }<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       propx=eval(eval(x - rectis.x) \/ rectis.width);<br \/>\n       propy=eval(eval(y - rectis.y) \/ rectis.height);<br \/>\n       if (eval(propx) &lt;= 0.111) {<br \/>\n         gval='1';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.222) {<br \/>\n         gval='2';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.333) {<br \/>\n         gval='3';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.444) {<br \/>\n         gval='4';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.555) {<br \/>\n         gval='5';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.666) {<br \/>\n         gval='6';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.777) {<br \/>\n         gval='7';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else if (eval(propx) &lt;= 0.888) {<br \/>\n         gval='8';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       } else {<br \/>\n         gval='9';<br \/>\n         setTimeout(agval, 1000);<br \/>\n       }<br \/>\n       }<br \/>\n   }<br \/>\n }<br \/>\n<br \/>\n function agval() {<br \/>\n   if (gval != '') {<br \/>\n      alert('You clicked ' + gval);<br \/>\n      gval='';<br \/>\n   }<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html\" title=\"Click picture\">live run<\/a> linked web application you can try for yourself regarding this, or see, in action, below &#8230;<\/p>\n<p><iframe style='width:90%;height:670px;' title='Proof of concept' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multipurpose_buttons.html'><\/iframe><\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Regarding the input type=button &#8220;Horizontal and Vertical Dimensions&#8221; element &#8220;look&#8221; above we needed help from the internet, thanks, to stop some web browsers such as Firefox, Chrome and Opera not &#8220;fattening out&#8221; the element height so as to show three lines of numbers, as per the CSS (thanks to <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/10743763\/word-wrap-break-word-does-not-work-in-this-example'>html &#8211; word-wrap break-word does not work in this example &#8211; Stack Overflow<\/a> and <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/13048499\/wrapping-an-html-input-buttons-text-value-over-multiple-lines'>Wrapping an HTML input button&#39;s text value over multiple lines &#8211; Stack Overflow<\/a> and <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/5419086\/button-height-on-chrome'>html &#8211; Button height on Chrome &#8211; Stack Overflow<\/a>) &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n #ixandy {<br \/>\n   font-size: 12px;<br \/>\n   width: 36px;<br \/>\n   height: 44px;<br \/>\n<br \/>\noverflow-wrap: break-word;<br \/>\nword-wrap: break-word;<br \/>\n<br \/>\n-ms-word-break: break-all;<br \/>\n\/* This is the dangerous one in WebKit, as it breaks things wherever *\/<br \/>\nword-break: break-all;<br \/>\n\/* Instead use this non-standard one: *\/<br \/>\nword-break: break-word;<br \/>\n<br \/>\n\/* Adds a hyphen where the word breaks, if supported (No Blink) *\/<br \/>\n-ms-hyphens: auto;<br \/>\n-moz-hyphens: auto;<br \/>\n-webkit-hyphens: auto;<br \/>\nhyphens: auto;<br \/>\n<br \/>\n  white-space: normal;<br \/>\n<br \/>\n  box-sizing: content-box;<br \/>\n  -moz-box-sizing: content-box;<br \/>\n  -ms-box-sizing: content-box;<br \/>\n  -webkit-box-sizing: content-box;<br \/>\n }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51369' onclick='var dv=document.getElementById(\"d51369\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onclick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51369' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51390' onclick='var dv=document.getElementById(\"d51390\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onload\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51390' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51409' onclick='var dv=document.getElementById(\"d51409\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/media\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51409' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51423' onclick='var dv=document.getElementById(\"d51423\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51423' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51431' onclick='var dv=document.getElementById(\"d51431\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onclick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51431' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The web would be a very boring woooooorrrrrlllllldddd without onclick logics. The number of thoughts regarding what to do when you click on an HTML element are more than the number of grains of sand on Bondi Beach, or the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/multipurpose-buttons-onclick-event-logic-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[113,1993,3531,174,257,275,281,290,2084,327,367,385,400,418,419,2208,576,1687,590,599,609,652,1807,760,861,870,997,1986,3169,1209,1262,1319,1891,3214,1369],"class_list":["post-51431","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-audio","tag-browse","tag-browsing","tag-button","tag-content","tag-cross-browser","tag-css","tag-data","tag-data-attributes","tag-did-you-know","tag-dropdown","tag-emoji","tag-event","tag-file","tag-file-api","tag-getboundingclientrect","tag-html","tag-html-global-attributes","tag-image","tag-img","tag-input","tag-javascript","tag-link","tag-media","tag-onclick","tag-onload","tag-programming","tag-proof-of-concept","tag-sessionstorage","tag-style","tag-textarea","tag-tutorial","tag-user","tag-user-interaction","tag-video"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51431"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=51431"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51431\/revisions"}],"predecessor-version":[{"id":51436,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51431\/revisions\/51436"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}