Соедините значение и функцию нажатой кнопки в JS

Question

Я новичок в JS.

У меня есть 2 функции. Как сделать:

1. если я нажму первую кнопку, чтобы сработала первая функция, если я нажму на вторую кнопку, чтобы сработала вторая функция?
2. Применить значение нажатой кнопки к функции, а затем применить его к полю ввода.

Пример: когда я набираю «ABC» с помощью Caesar Cipher, он возвращает «NOP», когда я набираю «ABC» с использованием моего шифра (или любого другого), он возвращает «BCD» (или любое другое значение, это зависит от того, какой шифр выбран). Спасибо всем заранее

Мои коды Js и Html ниже:

<div class="container">
  <div class="row">
    <form  class="col s12 m12 l12">
    <h2>JS Encription</h2>
      <div class="row">
        <div class="input-field col s5 m5 l5">
          <input id="field1" placeholder="Type you text here" id="first_name" type="text" class="validate">
          <label for="first_name">Input</label>
        </div>
        <div class="input-field col s5 m5 l5">
          <input id="field2" disabled placeholder="Result is shown here" id="first_name" type="text" class="validate">
          <label for="first_name">Output</label>
        </div>
      </div>
    </form>

  </div>
      <div class="row switchBtns">
        <div class="col s12 m12 l12">
            <div id="caesarButton" class="col s3 m3 l3 ">
                <a class="waves-effect waves-light btn-small">Caesar Cipher</a>
            </div>
            <div id="mineButton" class="col s3 m3 l3 ">
                <a class="waves-effect waves-light btn-small">My Cipher</a>
            </div>
            <div class="col s3 m3 l3 ">
                <a class="waves-effect waves-light btn-small">3rd Variant</a>
            </div>
            <div class="col s3 m3 l3 ">
                <a class="waves-effect waves-light btn-small">4th Variant</a>
            </div>
        </div>
    </div>
</div>

и код JS

 // CAESAR
        $("#caesarButton").click(function() {
            var clicked = $(this).val();
            $('#field1').val(encryp(clicked)).val();
        });

        $('#field1').on('keyup keypress blur', function () {  
            var textvalue = $(this).val();
            $('#field2').val(encryp(textvalue)).val();  
        });


        function encryp(tekst) {
            var result = "";
            var str = tekst.toUpperCase();


            for (var i=0; i<str.length ; i++) {
                var ascii = str[i].charCodeAt();

                if(ascii>=65 && ascii<=77) {
                    result+=String.fromCharCode(ascii+13);
                }
                else if(ascii>=78 && ascii<=90) {
                    result+=String.fromCharCode(ascii-13);
                }
                else {
                    result+=" ";
                }
            }
            return result ;
        }

        //MINE
        $("#mineButton").click(function() {
            var clicked = $(this).val();
            $('#field1').val(encryp(clicked)).val();
        });

        $('#field1').on('keyup keypress blur', function () {  
            var textvalue = $(this).val();
            $('#field2').val(encryp(textvalue)).val();  
        });


        function encryp(tekst) {
            var result = "";
            var str = tekst.toUpperCase();


            for (var i=0; i<str.length ; i++) {
                var ascii = str[i].charCodeAt();

                if(ascii>=65 && ascii<=77) {
                    result+=String.fromCharCode(ascii+3);
                }
                else if(ascii>=78 && ascii<=90) {
                    result+=String.fromCharCode(ascii-3);
                }
                else {
                    result+=" ";
                }
            }
            return result ;
        }

Answer 1

Я подготовил упрощенный пример контекстного переключения функций обработчика ввода для вас, вот вам:

// use an object as a key-value store for your functions
var funcs = {
  caesar: encryp1, // i dont know if i got these the right way around :D
  mine: encryp2
}
// store which funciton is currently selected in a variable
var selected = "caesar"

// call this function just to show the default selected function
determineOutput()

// CAESAR
$("#caesarButton").click(function() {
  console.log("caesar button clicked!")
  // here assign which function to use
  selected = "caesar"
  determineOutput()
});

//MINE
$("#mineButton").click(function() {
  console.log("mine button clicked!")
  // here assign which function to use
  selected = "mine"
  determineOutput()
});

$('#field1').on('keyup keypress blur', function () {  
  // this function is alled every time one of the events 
  // listed happens on the #field1 element
  determineOutput()
});

function determineOutput(){
  var textvalue = $('#field1').val();
  //use the function currently selected by addressing it with 
  // [] on the funcs object
  var correctFunction = funcs[selected]
  // then call the selected function with the input text
  $('#field2').val(correctFunction(textvalue));  
  // show the user which cipher we're using
  $("#currentCipher").html("current cipher:" + selected)
}


function encryp1(tekst) {
  var result = "";
  var str = tekst.toUpperCase();


  for (var i=0; i<str.length ; i++) {
    var ascii = str[i].charCodeAt();

    if(ascii>=65 && ascii<=77) {
      result+=String.fromCharCode(ascii+13);
    }
    else if(ascii>=78 && ascii<=90) {
      result+=String.fromCharCode(ascii-13);
    }
    else {
      result+=" ";
    }
  }
  return result ;
}

function encryp2(tekst) {
  var result = "";
  var str = tekst.toUpperCase();


  for (var i=0; i<str.length ; i++) {
    var ascii = str[i].charCodeAt();

    if(ascii>=65 && ascii<=77) {
      result+=String.fromCharCode(ascii+3);
    }
    else if(ascii>=78 && ascii<=90) {
      result+=String.fromCharCode(ascii-3);
    }
    else {
      result+=" ";
    }
  }
  return result ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="field1" placeholder="Type you text here" type="text">
  <label for="field1">Input</label>
</div>

<div>
  <input id="field2" disabled placeholder="Result is shown here" type="text" class="validate">
  <label for="field2">Output</label>
</div>

<p id="currentCipher"></p>

<button id="caesarButton">
  Caesar Cipher
</button>

<button id="mineButton">
  My Cipher
</button>