JavaScript + Html: вставьте переменные JavaScript в аргументы функции нажатия кнопок

Question

Я новичок в этом, и я пытаюсь настроить маленький Веб-сайт просто для удовольствия, и теперь я столкнулся с моей первой большой проблемой.

Так, что я хочу сделать?

Я получил это:

 function CaesarCipher(str) {

 str = str.toLowerCase();

 var result = '';
 var charcode = 0;

 for (var i = 0; i < str.length; i++) {
     charcode = (str[i].charCodeAt()) + 2;
     result += String.fromCharCode(charcode);
 }
 return result;}`

На который я звоню:

<button class="babo" name="button" id="kelp" onclick="CaesarCipher()"></button>

Также я получил это:

<input type="text" name="name" autocomplete="off" id="help" required  />
            <label for="name" class="label-name">
                <span class="content-name">Your Text</span>
           </label>
The contents of the 
<input> 

Естьсохранено в этом:

var x = document.getElementById("help").value;

Теперь к моему плану.

Я хочу получить значение "x" (из файла javascript) в параметры вызова функции onclick="CaesarCipher()"

Как получить текст, который находится на входе box= var "x", в вызов по нажатию кнопки?

Спасибо за помощь:)

Answer 1

Технически вам не нужно делать то, что вы просите.Вы можете получить значение справки в самой функции.

function CaesarCipher() {
var str = document.getElementById("help").value;

Answer 2

Посмотрите на этот пример из w3schools, я думаю, он вам поможет [1]

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_text_value_formval

Answer 3

Просто используйте Element.addEventListener() и избавьтесь от атрибута onclick="". В вашем случае:

var x = document.getElementById("help").value;
var button = document.getElementById('kelp');
button.addEventListener('click', function (e) {

    CaesarCipher(x);
});

Как правило, лучше отделить шаблон HTML от логики JS, потому что у вас чистый проект и вы знаете, где искать разные вещи.