How do you use one button to switch upper case and lower case by using javascript

Question

We need one button to switch upper case and lower case of 26 alphabet by using JavaScript, just like android input method did. The code of using two button is as below. In order to save space, we just gave 3 alphabet button.

Any help is appreciated!

<input type="button" id="myBtn_q" onclick="myFunctionTest(this.value)" value="q"> 
<input type="button" id="myBtn_w" onclick="myFunctionTest(this.value)" value="w">
<input type="button" id="myBtn_e" onclick="myFunctionTest(this.value)" value="e">
<input type="button" id="myBtn_upperCase" onclick="myFunctionupperCase()" value="upperCase">
<input type="button" id="myBtn_lowerCase" onclick="myFunctionlowerCase()" value="lowerCase">

function myFunctionupperCase() {
    if(document.getElementById("myBtn_a").value=="a"){
     alert(document.getElementById("myBtn_a").value);
     var controller=97;
        for (controller=97; controller < 123; controller++) { 
            var id_code="myBtn_"+String.fromCharCode(controller);
            //alert(id_code);
            document.getElementById(id_code).value=String.fromCharCode(controller-32);
            }
    }
}
function myFunctionlowerCase() {
    if(document.getElementById("myBtn_a").value=="A"){
     alert(document.getElementById("myBtn_a").value);
        var controller=65;
        for (controller=65; controller < 91; controller++) { 
            var id_code="myBtn_"+String.fromCharCode(controller).toLowerCase();
            //alert(id_code);
            document.getElementById(id_code).value=String.fromCharCode(controller+32);
            }
    }
}

We attempt to combine two button's code into one button. However, it did not works. The code is as below.

<input type="button" id="myBtn_caseChange" onclick="myFunctioncaseChange()" value="caseChange">

function myFunctioncaseChange() {
    if(document.getElementById("myBtn_a").value=="a"){
        document.getElementById("myBtn_caseChange").value=="Lower Case"
        alert(document.getElementById("myBtn_a").value);
        var controller=97;
        for (controller=97; controller < 123; controller++) { 
            var id_code="myBtn_"+String.fromCharCode(controller);
                document.getElementById(id_code).value=String.fromCharCode(controller-32);
            }
    }
    if(document.getElementById("myBtn_a").value=="A"){
        document.getElementById("myBtn_caseChange").value=="Upper Case"
        alert(document.getElementById("myBtn_a").value);
        var controller=65;
        for (controller=65; controller < 91; controller++) { 
            var id_code="myBtn_"+String.fromCharCode(controller).toLowerCase();
                document.getElementById(id_code).value=String.fromCharCode(controller+32);
            }
    }
}

You should start solving this by finding out whether you really need to copy and paste 26 buttons into your document. All of this code is a grave violation of the DRY principle. Shelve this for now and learn about how to properly use functions and avoid duplicate code. — , Feb 14 '18 at 23:14
Chris,the recommendation you gave is the the question we asked. — Andy Tang, Feb 14 '18 at 23:18
If you code works, but is inefficiently coded, you should probably be asking on codereview.stackexchange.com — Alnitak, Feb 14 '18 at 23:19
Alnitak, it works. But two buttons are not what we want. We try to use one button, but it did not work well. I will post the code not working. — Andy Tang, Feb 14 '18 at 23:22
Right, it wasn't completely clear that your problem is how to use one button _instead of two_. — Alnitak, Feb 14 '18 at 23:25

Alnitak · Answer 1 · 2018-02-15T00:12:04.450

This should do it:

(function() { // closure to encapsulate the toggle state

  // choose the initial case
  var is_upper = true;

  // get the toggle button's ID
  var toggle = document.getElementById('myBtn_toggle');

  // helper function that sets the buttons how you want
  function update() {
    toggle.value = is_upper ? '\u21E9' : '\u21E7';
    for (var c = 1; c <= 26; ++c) {
      var lc = String.fromCharCode(96 + c);
      var uc = String.fromCharCode(64 + c);
      var el = document.getElementById('myBtn_' + lc);
      if (!el) continue;
      el.value = is_upper ? uc : lc;
    }  
  }

  // add an event handler _properly_, without inline handlers
  toggle.addEventListener('click', function() {
    is_upper = !is_upper; // flip the case
    update();             // update the buttons
  });

  update();               // make sure the page starts how you want

})(); // execute the above closure immediately

Demo at https://jsfiddle.net/alnitak/1c5x76uf/

Alnitak, the code you gave is very succinct. Thank you very much! — Andy Tang, Feb 15 '18 at 00:01

How do you use one button to switch upper case and lower case by using javascript

1 Answers1