-1

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);
            }
    }
}
6
  • 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.
    – user5734311
    Feb 14, 2018 at 23:14
  • avoiding inline event handlers would help, too...
    – Alnitak
    Feb 14, 2018 at 23:15
  • Chris,the recommendation you gave is the the question we asked.
    – Andy Tang
    Feb 14, 2018 at 23:18
  • If you code works, but is inefficiently coded, you should probably be asking on codereview.stackexchange.com
    – Alnitak
    Feb 14, 2018 at 23:19
  • 1
    Right, it wasn't completely clear that your problem is how to use one button instead of two.
    – Alnitak
    Feb 14, 2018 at 23:25

1 Answer 1

1

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/

2
  • Alnitak, the code you gave is very succinct. Thank you very much!
    – Andy Tang
    Feb 15, 2018 at 0:01
  • @AndyTang I just shortened the addEventListener line too.
    – Alnitak
    Feb 15, 2018 at 0:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.