<html>
<head>
<style>
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
white-space: pre-wrap;
}
</style>
<script type='text/javascript'>

var doit=true;

var onev=null;
var onevc='null';
var one_v=null;
var one_vc='null';

var preonev=null;
var preonevc='null';
var preone_v=null;
var preone_vc='null';

if (1 == 2) {
alert(onev);
alert(+onev);
alert(++onev);
alert(+(++onev));
alert(+(+(++onev)));

alert(one_v);
alert(-one_v);
alert(--one_v);
alert(-(--one_v));
alert(-(-(--one_v)));
}

function onevcplus(obut,dot) {
if (document.getElementById('topsel').value.toLowerCase() == 'prefixsuffix') {
if (!dot) {
return;
}
onev=+onev; //(+((onev)+));
onev=+onev; //(+((onev)+));
} else if (document.getElementById('topsel').value.toLowerCase() == 'suffix') {
if (!dot) {
return;
}
onev=+onev; //((onev)+);
} else {
if (!dot) {
return;
}
onev=+onev;
}
onevc='' + onev;
}

function one_vcplus(obut,dot) {
if (document.getElementById('topsel').value.toLowerCase() == 'prefixsuffix') {
if (!dot) {
return;
}
one_v=-one_v; //one_v=-one_v-;
one_v=-one_v; //one_v=-one_v-;
} else if (document.getElementById('topsel').value.toLowerCase() == 'suffix') {
if (!dot) {
return;
}
one_v=-one_v; //one_v=one_v-;
} else {
if (!dot) {
return;
}
one_v=-one_v;
}
one_vc='' + one_v;
}

function onevcplusplus(obut,dot) {
if (document.getElementById('topsel').value.toLowerCase() == 'prefixsuffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'onev++; ++onev;');
return;
}
onev++;
++onev;
} else if (document.getElementById('topsel').value.toLowerCase() == 'suffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'++');
return;
}
onev++;
} else {
if (!dot) {
obut.innerHTML=dotitle(obut,'++');
return;
}
++onev; //onev=++onev;
}
onevc='' + onev;
}

function one_vcplusplus(obut,dot) {
if (document.getElementById('topsel').value.toLowerCase() == 'prefixsuffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'one_v--; --one_v;');
return;
}
one_v--;
--one_v;
} else if (document.getElementById('topsel').value.toLowerCase() == 'suffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'--');
return;
}
one_v--;
} else {
if (!dot) {
obut.innerHTML=dotitle(obut,'--');
return;
}
--one_v; //one_v=--one_v;
}
one_vc='' + one_v;
}

function onevcplusplusplus(obut,dot) {
if (document.getElementById('topsel').value.toLowerCase() == 'prefixsuffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'onev++; +onev; ++onev; +onev;');
return;
}
//onev=''; //+(++onev++)+;
onev++;
onev=+onev;
++onev; //onev=++onev;
onev=+onev;
} else if (document.getElementById('topsel').value.toLowerCase() == 'suffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'onev++; +onev;');
return;
}
onev++;
onev=+onev;
} else {
if (!dot) {
obut.innerHTML=dotitle(obut,'+(++onev)');
return;
}
onev=+(++onev);
}
onevc='' + onev;
}

function one_vcplusplusplus(obut,dot) {
if (document.getElementById('topsel').value.toLowerCase() == 'prefixsuffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'one_v--; -one_v; --one_v; -one_v;');
return;
}
//one_v=-(--one_v--)-;
one_v--;
one_v=-one_v;
--one_v; //one_v=--one_v;
one_v=-one_v;
} else if (document.getElementById('topsel').value.toLowerCase() == 'suffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'one_v--; -one_v;');
return;
}
one_v--;
one_v=-one_v;
} else {
if (!dot) {
obut.innerHTML=dotitle(obut,'-(--one_v)');
return;
}
one_v=-(--one_v);
}
one_vc='' + one_v;
}

function onevcplusplusplusplus(obut,dot) {
if (document.getElementById('topsel').value.toLowerCase() == 'prefixsuffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'onev++; +onev; +onev; ++onev; +onev; +onev;');
return;
}
//onev=+(+(++onev++)+)+;
onev++;
onev=+onev;
onev=+onev;
++onev; //onev=++onev;
onev=+onev;
onev=+onev;
} else if (document.getElementById('topsel').value.toLowerCase() == 'suffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'onev++; +onev; +onev;');
return;
}
//onev=((onev++)+)+;
onev++;
onev=+onev;
onev=+onev;
} else {
if (!dot) {
obut.innerHTML=dotitle(obut,'+(+(++onev))');
return;
}
onev=+(+(++onev));
}
onevc='' + onev;
}

function one_vcplusplusplusplus(obut,dot) {
if (document.getElementById('topsel').value.toLowerCase() == 'prefixsuffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'one_v--; -one_v; -one_v; --one_v; -one_v; -one_v;');
return;
}
//one_v=-(-(--one_v--)-)-;
one_v--;
one_v=-one_v;
one_v=-one_v;
--one_v; //one_v=--one_v;
one_v=-one_v;
one_v=-one_v;
} else if (document.getElementById('topsel').value.toLowerCase() == 'suffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'one_v--; -one_v; -one_v;');
return;
}
//one_v=((one_v--)-)-;
one_v--;
one_v=-one_v;
one_v=-one_v;
} else {
if (!dot) {
obut.innerHTML=dotitle(obut,'-(-(--one_v))');
return;
}
one_v=-(-(--one_v));
}
one_vc='' + one_v;
}

function onevcplusplusplusplusminus(obut,dot) {
if (document.getElementById('topsel').value.toLowerCase() == 'prefixsuffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'onev++; -onev; +onev; ++onev; -onev; +onev;');
return;
}
//onev=+(-(++onev++)-)+;
onev++;
onev=-onev;
onev=+onev;
++onev; //onev=++onev;
onev=-onev;
onev=+onev;
} else if (document.getElementById('topsel').value.toLowerCase() == 'suffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'onev++; -onev; +onev;');
return;
}
//onev=((onev++)-)+;
onev=onev++;
onev=-onev;
onev=+onev;
} else {
if (!dot) {
obut.innerHTML=dotitle(obut,'+(-(++onev))');
return;
}
onev=+(-(++onev));
}
onevc='' + onev;
}

function one_vcplusplusplusplusminus(obut,dot) {
if (document.getElementById('topsel').value.toLowerCase() == 'prefixsuffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'one_v--; +one_v; -one_v; --one_v; +one_v; -one_v;');
return;
}
//one_v=-(+(--one_v--)+)-;
one_v--;
one_v=+one_v;
one_v=-one_v;
--one_v; //one_v=--one_v;
one_v=+one_v;
one_v=-one_v;
} else if (document.getElementById('topsel').value.toLowerCase() == 'suffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'one_v--; +one_v; -one_v;');
return;
}
//one_v=((one_v--)+)-;
one_v--;
one_v=+one_v;
one_v=-one_v;
} else {
if (!dot) {
obut.innerHTML=dotitle(obut,'-(+(--one_v))');
return;
}
one_v=-(+(--one_v));
}
one_vc='' + one_v;
}

function onevcplusplusplusplusminusminus(obut,dot) {
if (document.getElementById('topsel').value.toLowerCase() == 'prefixsuffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'onev--; +onev; -onev; --onev; +onev; -onev;');
return;
}
//onev=-(+(--onev--)+)-;
onev--;
onev=+onev;
onev=-onev;
--onev; //onev=--onev;
onev=+onev;
onev=-onev;
} else if (document.getElementById('topsel').value.toLowerCase() == 'suffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'onev--; +onev; -onev;');
return;
}
//onev=((onev--)+)-;
onev--;
onev=+onev;
onev=-onev;
} else {
if (!dot) {
obut.innerHTML=dotitle(obut,'-(+(--onev))');
return;
}
onev=-(+(--onev));
}
onevc='' + onev;
}

function one_vcplusplusplusplusminusminus(obut,dot) {
if (document.getElementById('topsel').value.toLowerCase() == 'prefixsuffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'one_v++; -one_v; +one_v; ++one_v; -one_v; +one_v;');
return;
}
//one_v=+(-(++one_v++)-)+;
one_v++;
one_v=-one_v;
one_v=+one_v;
++one_v; //one_v=++one_v;
one_v=-one_v;
one_v=+one_v;
} else if (document.getElementById('topsel').value.toLowerCase() == 'suffix') {
if (!dot) {
obut.innerHTML=dotitle(obut,'one_v++; -one_v; +one_v;');
return;
}
//one_v=((one_v++)-)+;
one_v++;
one_v=-one_v;
one_v=+one_v;
} else {
if (!dot) {
obut.innerHTML=dotitle(obut,'+(-(++one_v))');
return;
}
one_v=+(-(++one_v));
}
one_vc='' + one_v;
}

function dotitle(bto, intt) {
intt=intt.replace(/\;\+onev/g,';onev=+onev').replace(/\;\-onev/g,';onev=-onev').replace(/\;\+one\_v/g,';one_v=+one_v').replace(/\;\-one\_v/g,';one_v=-one_v');
bto.title=intt.replace(/\&\#13\;\&\#10\;/g, ' ');
return intt;
}

function isitc() {
if (preonev != onev) {
document.getElementById('b1').innerHTML='' + preonevc;
document.getElementById('a1').innerHTML='' + onevc;
document.getElementById('b1').style.backgroundColor='yellow';
document.getElementById('a1').style.backgroundColor='lightgreen';
preonev=onev;
preonevc=onevc;
}
if (preone_v != one_v) {
document.getElementById('b2').innerHTML='' + preone_vc;
document.getElementById('a2').innerHTML='' + one_vc;
document.getElementById('b2').style.backgroundColor='yellow';
document.getElementById('a2').style.backgroundColor='lightgreen';
preone_v=one_v;
preone_vc=one_vc;
}
}

function changelook(os) {
var buts=document.getElementsByTagName('button');
doit=false;
for (var ib=0; ib<buts.length; ib++) {
if (('' + buts[ib].outerHTML).indexOf('doit)') != -1) {
buts[ib].click();
}
}
doit=true;
document.getElementById('thjp').innerHTML='Javascript ' + os.value.replace('PrefixSuffix', 'Prefix and Suffix') + ' Increment and Decrement Counter';
}

</script>
</head>
<body onload="setInterval(isitc, 500);">
<h1>Javascript <select onchange='changelook(this);' id=topsel><option value=Prefix>Prefix</option><option value=Suffix>Suffix</option><option value=PrefixSuffix>Prefix and Suffix</option></select> Increment and Decrement Counter</h1>
<h3>RJM Programming - October, 2021</h3>

<table border=9 style='width:96%;'>
<tr><th colspan=12 id=thjp>Javascript Prefix Increment and Decrement Counter</th></tr>
<tr><th colspan=6>Increment</th><th colspan=6>Decrement</th></tr>
<tr><th colspan=6>Start with <br>var onev=<button title=Reset onclick="onev=null; onevc='null';">null</button>;</th><th colspan=6>Start with <br>var one_v=<button title=Reset onclick="one_v=null; one_vc='null';">null</button>;</th></tr>

<tr><th colspan=3>Before</th><th colspan=3>After</th><th colspan=3>Before</th><th colspan=3>After</th></tr>
<tr><th colspan=3 id=b1>null</th><th colspan=3 id=a1>null</th><th colspan=3 id=b2>null</th><th colspan=3 id=a2>null</th></tr>


<tr><td><button title=+ onclick="onevcplus(this,doit);">+</input></td>
<td><button title=++ onclick="onevcplusplus(this,doit);">++</input></td>
<td><button title=+(++onev) onclick="onevcplusplusplus(this,doit);">+(++onev)</button></td>
<td><button title=+(+(++onev)) onclick="onevcplusplusplusplus(this,doit);">+(+(++onev))</button></td>

<td><button title=+(-(++onev)) onclick="onevcplusplusplusplusminus(this,doit);">+(-(++onev))</button></td>

<td><button title='-(+(--onev))' onclick="onevcplusplusplusplusminusminus(this,doit);">-(+(--onev))</button></td>
<td><button title='-' onclick="one_vcplus(this,doit);">-</input></td>
<td><button title='--' onclick="one_vcplusplus(this,doit);">--</input></td>
<td><button title='-(--onev)' onclick="one_vcplusplusplus(this,doit);">-(--one_v)</button></td>
<td><button title='-(-(--one_v))' onclick="one_vcplusplusplusplus(this,doit);">-(-(--one_v))</button></td>

<td><button title='-(+(--one_v))' onclick="one_vcplusplusplusplusminus(this,doit);">-(+(--one_v))</button></td>

<td><button title='+(-(++one_v))' onclick="one_vcplusplusplusplusminusminus(this,doit);">+(-(++one_v))</button></td>
</tr>

</table>

</body>
</html>