Keyboard handler for selecting radio buttons

Question

I have got my JavaScript working as seen here:
https://jsfiddle.net/yLg1qs04/3/

But how do I condense/shorten it so that it's not repeating itself so often and taking up so many lines?

$( '#mcnumber' ).keyup(function(){ //when a user types in input box
    var mcnum = this.value;
    if ( mcnum.charAt( 0 ) == '1' ) {
       $("#1mcskel1").prop("checked", "checked");
    } else if ( mcnum.charAt( 0 ) == '2' ) {
       $("#1mcskel2").prop("checked", "checked");
    } else if ( mcnum.charAt( 0 ) == '3' ) {
       $("#1mcskel3").prop("checked", "checked");
    } else if ( mcnum.charAt( 0 ) == '4' ) {
       $("#1mcskel4").prop("checked", "checked");
    } else if ( mcnum.charAt( 0 ) == '5' ) {
       $("#1mcskel5").prop("checked", "checked");
    } else if ( mcnum.charAt( 0 ) == '6' ) {
       $("#1mcskel6").prop("checked", "checked");
    } else if ( mcnum.charAt( 0 ) == '7' ) {
       $("#1mcskel7").prop("checked", "checked");
    } else if ( mcnum.charAt( 0 ) == '8' ) {
       $("#1mcskel8").prop("checked", "checked");
    } else if ( mcnum.charAt( 0 ) == '9' ) {
       $("#1mcskel9").prop("checked", "checked");
    } else if ( mcnum.charAt( 0 ) == '0' ) {
       $("#1mcskel0").prop("checked", "checked");
    } 
})

Answer 1

If you are sure it will always have a value just use the charAt value to build the id you try to select in each if block. Something like:

$( '#mcnumber' ).keyup(function() {
    var mcnum = this.value;
    var id = "#1mcskel" + mcnum.charAt( 0 );
    $(id).prop("checked", "checked");
})

In the future just try to find patterns in the code. Every if block you have has the same code except for the number at the end of the id selector and the number you checked against charAt in the condition. And they are the same number in both places so try to merge the relevant parts of the code.

So seeing those patterns can help you write more versatile code. Of course the code above assumes you will have a definite value. Could be it needs some error handling added but hopefully this helps you get the idea.

EDIT

So I have taken what you added above and looked for a pattern, taken the relevant pieces of that pattern and shortened the code, just as I advised priorly in the answer. I would like to add as a comment that I have no context to this code only what you have shown me so I am simply applying my pattern searching/combining example here. Take a look:

$( '#mcnumber' ).keyup(function() {
    var mcnum = this.value, index = 0, id;
    for ( ; index < 3; index++) {
        id = "#" + (index + 1) + "mcskel" + mcnum.charAt( index );
        $(id).prop("checked", "checked");
    }
})

It seems odd to me that you were attaching the multiple anonymous functions to the same element and the same event so I made it a single one. As you can see the pattern I saw was you were attaching the same event (keyup) to the same element (mcnumber). So I took those relevant pieces and combined them.

Then I looked at the code inside the function and searched for a pattern. Again I saw most lines were exactly the same except for the middle line of code. What were the differences? The number at the beginning of the id selector and the number used in the charAt. OK, so can we find a pattern with those numbers? Well with the id the range goes from 1-3 and with charAt the range goes from 0-2. And looking at both those ranges they are the same length except for each number in the range id selector is +1 larger.

So lets loop over that range from 0-2 using 0-2 on the charAt and using 0-2 to build the id selector but add one every time so we get 1-3.

Answer 2

Please find the working code here: https://jsfiddle.net/mallik_jahir/yLg1qs04/8/

For condense/shorten the code so that it doesn't get repeated, you can use a single loop concept (for/while). As in your code two things are getting incremented.

1) a)$("#1mcskel1")

  b)mcnum.charAt( 0 ) == '1'

2) a)$("#1mcskel2")

  b) mcnum.charAt( 0 ) == '2'  etc

So by using loop concept, we can replace the incrementing value by loop incrementing variable. And also by converting the variable value into string as the checking value is a string value.

Just try it whether it works or not.