如何在没有http表单的情况下使javascript属性成为html属性？

I have a javascript variable with parameters, but I don't know how to pass it into my html code. The javascript code is taken from https://gist.github.com/EvanHahn/2587465:

var caesarShift = function(str, amount) {
    // Wrap the amount
    if (amount < 0)
        return caesarShift(str, amount + 26);

    // Make an output variable
    var output = '';

    // Go through each character
    for (var i = 0; i < str.length; i ++) {
        // Get the character we'll be appending
        var c = str[i];

        // If it's a letter...
        if (c.match(/[a-z]/i)) {
            // Get its code
            var code = str.charCodeAt(i);

            // Uppercase letters
            if ((code >= 65) && (code <= 90))
                c = String.fromCharCode(((code - 65 + amount) % 26) + 65);

            // Lowercase letters
            else if ((code >= 97) && (code <= 122))
                c = String.fromCharCode(((code - 97 + amount) % 26) + 97);
        }

        // Append
        output += c;
    }

    // All done!
    return output;
};

我显然想将其传递给我的HTML。我做了一些研究，并遇到了诸如以下的方式：

<p id="output"></p>

接着

document.getElementById('output').innerHTML = lengthOfName;

但我不知道如何将它们全部加在一起。如何调用变量？对于字符串，我有一个文本区域输入框，也许还有一个用于第二个参数（数量）的单击器，但是我不知道如何将它们全部整合到HTML中。

In my previous question, How do I make a javascript function a html attribute?, and my answer was an HTTP form. But I'm trying to create a site that has a lot of ways to decrypt 1 string. So if the user has to click submit every time, especially 25 times in this case, that's not going to be that helpful. Is there any way to make it live without a submit button? This is what I'm kind of going for, https://cryptii.com/pipes/caesar-cipher.