{"id":53623,"date":"2021-10-14T03:01:45","date_gmt":"2021-10-13T17:01:45","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=53623"},"modified":"2021-10-12T12:28:40","modified_gmt":"2021-10-12T02:28:40","slug":"javascript-incrementing-and-decrementing-suffix-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-incrementing-and-decrementing-suffix-tutorial\/","title":{"rendered":"Javascript Incrementing and Decrementing Suffix Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plus_avoids_zero.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Incrementing and Decrementing Suffix Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plus_avoids_zero_presuff.jpg\" title=\"Javascript Incrementing and Decrementing Suffix Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Incrementing and Decrementing Suffix Tutorial<\/p><\/div>\n<p>The recent <a title='Javascript Incrementing and Decrementing Primer Tutorial' href='#jidpt'>Javascript Incrementing and Decrementing Primer Tutorial<\/a> broached &#8230;<\/p>\n<ul>\n<li><strong>prefix<\/strong> syntactical Javascript Incrementing and Decrementing of var<font size=1>iables<\/font> &#8230; and, today, we extend that to &#8230;<\/li>\n<li><strong>suffix<\/strong> syntactical Javascript Incrementing and Decrementing of var<font size=1>iables<\/font> &#8230; and to &#8230;<\/li>\n<li>both<\/li>\n<\/ul>\n<p> &#8230; but in adding that new functionality, we baulked that little bit because in order to do this in most of the scenarios of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plus_avoids_zero.html-GETME\" title='plus_avoids_zero.html'>our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plus_avoids_zero.html-GETME\" title='plus_avoids_zero.html'>plus_avoids_zero.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plus_avoids_zero.html\" title='Click picture'>web application live run<\/a> link, it required multiple Javascript commands per single HTML button element click\/tap.  We figure you&#8217;ll forgive us in the sense that our semicolon (&#8220;;&#8221;) based delimited set of commands could be fed through a Javascript <a target=_blank title='Javascript eval' href='https:\/\/www.w3schools.com\/jsref\/jsref_eval.asp'>eval<\/a> <font size=1>(though we don&#8217;t)<\/font> to achieve the single button click\/tap per single (eval) act, anyway.<\/p>\n<p>As well, in executing the <a href=\"#pazif\" title='Click picture'>web application here and now look<\/a>, the HTML button &#8220;looks&#8221; (helped out by yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-button-element-whitespace-primer-tutorial\/' title='HTML Button Element Whitespace Primer Tutorial'>HTML Button Element Whitespace Primer Tutorial<\/a>) we hope the patterns help you out with the way this Incrementing and Decrementing can work in Javascript.<\/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\/javascript-incrementing-and-decrementing-suffix-tutorial\/'>Javascript Incrementing and Decrementing Suffix Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jidpt'>Previous relevant <a target=_blank title='Javascript Incrementing and Decrementing Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-incrementing-and-decrementing-primer-tutorial\/'>Javascript Incrementing and Decrementing 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\/plus_avoids_zero.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Incrementing and Decrementing Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plus_avoids_zero.jpg\" title=\"Javascript Incrementing and Decrementing Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Incrementing and Decrementing Primer Tutorial<\/p><\/div>\n<p>Sometimes writing Javascript code we&#8217;ve let code like &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  var counter=null;<br \/>\n<br \/> <br \/>\n  function initializeCounter() {<br \/>\n    counter=0;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function incrementCounter() {<br \/>\n    <b>if (counter == null) {<\/b><br \/>\n    <b>  counter=0;<\/b><br \/>\n    <b>}<\/b><br \/>\n    ++counter;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  if (eval(Math.floor(Math.random() * 1746765765) % 2) == 1) {<br \/>\n    initializeCounter();<br \/>\n  } else {<br \/>\n    incrementCounter(); \/\/ if called first, is interesting<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; go through to the keeper.  There&#8217;s nothing <i>intrinsically<\/i> wrong with it.  But the other day, thanks to <a target=_blank title=\"Device Orientation \u2018alpha\u2019\nCalibration\" href='https:\/\/www.w3.org\/2008\/geolocation\/wiki\/images\/e\/e0\/Device_Orientation_%27alpha%27_Calibration-_Implementation_Status_and_Challenges.pdf'>Device Orientation \u2018alpha\u2019<br \/>\nCalibration &#8230; World-based calibration on iOS<\/a>, we learnt that the <b>&#8220;if&#8221;<\/b> bracketing above can be superfluous in the sense that that same code above could be written &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  var counter=null;<br \/>\n<br \/> <br \/>\n  function initializeCounter() {<br \/>\n    counter=0;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function incrementCounter() {<br \/>\n    ++(+counter); \/\/ ... more succinctly<br \/>\n  }<br \/>\n<br \/> <br \/>\n  if (eval(Math.floor(Math.random() * 1746765765) % 2) == 1) {<br \/>\n    initializeCounter();<br \/>\n  } else {<br \/>\n    incrementCounter(); \/\/ if called first, is interesting<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p>And so, we thought we&#8217;d write today&#8217;s proof of concept <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plus_avoids_zero.html_GETME\">plus_avoids_zero.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plus_avoids_zero.html\">live run<\/a> link in order for a user to try out some &#8220;Prefix style&#8221; incrementing and decrementing of Javascript var<font size=1>iables<\/font> &#8230;<\/p>\n<p><iframe id=pazif src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plus_avoids_zero.html\" style=\"width:96%;height:400px;\"><\/iframe><\/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='#d53593' onclick='var dv=document.getElementById(\"d53593\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/operator\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53593' 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='#d53623' onclick='var dv=document.getElementById(\"d53623\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/increment\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53623' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The recent Javascript Incrementing and Decrementing Primer Tutorial broached &#8230; prefix syntactical Javascript Incrementing and Decrementing of variables &#8230; and, today, we extend that to &#8230; suffix syntactical Javascript Incrementing and Decrementing of variables &#8230; and to &#8230; both &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-incrementing-and-decrementing-suffix-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":[3555,3815,354,399,3321,3814,3817,3290,652,752,3816,2269,2270,997,2271,1319,1721],"class_list":["post-53623","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-decrement","tag-decrementing","tag-dom","tag-eval","tag-increment","tag-incrementing","tag-initialization","tag-initialize","tag-javascript","tag-mathematics","tag-null","tag-operator","tag-prefix","tag-programming","tag-suffix","tag-tutorial","tag-variable"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53623"}],"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=53623"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53623\/revisions"}],"predecessor-version":[{"id":53625,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53623\/revisions\/53625"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=53623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=53623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=53623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}