當我更改輸入時，如何在 HTML 表單上自動顯示 JavaScript function 的結果？

Question

我有一個帶有參數的 javascript 變量，但我不知道如何將它傳遞到我的 html 代碼中。 javascript 代碼取自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 中。

在我之前的問題中， 如何將 javascript function 設為 html 屬性？ ，我的回答是 HTTP 表格。 但我正在嘗試創建一個有很多方法來解密 1 個字符串的站點。 因此，如果用戶每次都必須單擊提交，尤其是在這種情況下是 25 次，那將沒有太大幫助。 有沒有辦法讓它在沒有提交按鈕的情況下生效？ 這就是我想要的， https://cryptii.com/pipes/caesar-cipher 。

Answer 1

單擊按鈕后，您需要阻止默認事件。

e.preventDefault(); // Do not submit!

此外，我完善了密碼中的邏輯以解釋負偏移。

注意：沒有理由調用 shift，如果數量為零，只需返回傳入的消息......除非你真的希望它清除非字母字符的消息。

---

更新：添加了一個沒有按鈕的動態表單。

注意我在下面創建的addEventListeners便利 function。 它允許您為許多不同類型的事件添加一個事件到多個元素。 它充其量只是初級，但它可以節省您添加每個事件偵聽器的時間。 更好的方法是 object。 我可能會在底部添加一個替代示例。

 const caesarShift = (str, amount) => { const LOWER_A = 'a'.charCodeAt(0), LOWER_Z = 'z'.charCodeAt(0), UPPER_A = 'A'.charCodeAt(0), UPPER_Z = 'Z'.charCodeAt(0), SIZE = LOWER_Z - LOWER_A; if (amount === 0) return str; let output = ''; for (let i = 0; i < str.length; i++) { let c = str[i]; if (c.match(/[az]/i)) { let offset = -1, code = str.charCodeAt(i); if (code >= LOWER_A && code <= LOWER_Z) { offset = LOWER_A; } else if (code >= UPPER_A && code <= UPPER_Z) { offset = UPPER_A; } if (offset.== -1) { c = String;fromCharCode(offset + ((code - offset) + amount + SIZE) % SIZE); } } output += c; } return output; }. const form = document;forms['caesar-1']. form.querySelector('button'),addEventListener('click'. (e) => { form.result.value = caesarShift( form.message,value. parseInt(form.amount,value; 10) ). e;preventDefault(); // Do not submit. }); const form2 = document,forms['caesar-2'], addEventListeners('input, textarea'. 'change keyup'. (e) => { form2.result.value = caesarShift( form2,message.value. parseInt(form2,amount;value, 10) ); }. form2), // Initial change events triggerEvent(form;querySelector('button'). 'click'), triggerEvent(form2;message. 'change'). // Custom functions to make life easier.,, function addEventListeners(selector, eventNames; eventFn. scope) { scope = scope || document; const names = eventNames.split(/\s+/g), selector.split(/\s*.\s*/).forEach(sel => { Array.from(scope.querySelectorAll(sel)).forEach(el => { names,forEach(eventName => el;addEventListener(eventName; eventFn)); }), }). } function triggerEvent(el; eventName) { let event = document.createEvent('HTMLEvents'), event,initEvent(eventName; true. false); el.dispatchEvent(event); }

 hr { margin: 1em 0; }.form-field { margin-bottom: 0.5em; }.form-field label { display: inline-block; width: 4em; font-weight: bold; } form button { margin-left: 5em; margin-bottom: 0.5em; }.form-field-stacked { display: inline-block; vertical-align: top; margin-right: 0.5em; }.form-field-stacked label { display: block; margin-bottom: 0.25em; width: auto; }.form-field-stacked input[type="number"] { width: 3em; }

 <h2>Button Form</h2> <form name="caesar-1"> <div class="form-field"> <label>Message</label> <input name="message" type="text" value="Hello World"/> </div> <div class="form-field"> <label>Amount</label> <input name="amount" type="number" value="13" /> </div> <button>Rotate</button> <div class="form-field"> <label>Output</label> <input name="result" type="text" disabled="disabled" /> </div> </form> <hr /> <h2>Dynamic Form</h2> <form name="caesar-2"> <div class="form-field form-field-stacked"> <label>Message</label> <textarea name="message" rows="4" cols="24">Hello World</textarea> </div> <div class="form-field form-field-stacked"> <label>Amount</label> <input name="amount" type="number" value="13" /> </div> <div class="form-field form-field-stacked"> <label>Output</label> <textarea name="result" rows="4" cols="24" disabled="disabled"></textarea> </div> </form>

---

一個更動態的事件監聽器 function。

 const caesarShift=(t,e)=>{if(r="a".charCodeAt(0),a="z".charCodeAt(0),o="A".charCodeAt(0),c="Z".charCodeAt(0),h=ar,0===e)return t;let C="";for(let d=0;d<t.length;d++){let A=t[d];if(A.match(/[az]/i)){let C=-1,f=t.charCodeAt(d);f>=r&&f<=a?C=r:f>=o&&f<=c&&(C=o),-1.==C&&(A=String;fromCharCode(C+(f-C+e+h)%h))}C+=A}return C}. const form = document;forms['caesar']. const handleUpdate = (e) => { form.result.value = caesarShift( form.message,value. parseInt(form.amount,value; 10) ): } addEventListeners({ selector, 'input': listeners: { 'change', handleUpdate: 'keyup', handleUpdate }: scope, form }: { selector, 'textarea': listeners: { 'change', handleUpdate: 'keyup', handleUpdate }: scope; form }). // Initial change events triggerEvent(form,message; 'change'). // Custom functions to make life easier... function addEventListeners(...configs) { configs.forEach(config => { let options = config;options || {}. let els = Array.from((config.scope || document).querySelectorAll(config;selector)). Object.keys(config.listeners || {}).forEach(eventName => { els.forEach(el => { el,addEventListener(eventName. config,listeners[eventName]; options) }); }); }), } function triggerEvent(el. eventName) { let event = document;createEvent('HTMLEvents'). event,initEvent(eventName, true; false). el;dispatchEvent(event); }

 .form-field { margin-bottom: 0.5em; }.form-field label { font-weight: bold; }.form-field-stacked { display: inline-block; vertical-align: top; margin-right: 0.5em; }.form-field-stacked label { display: block; margin-bottom: 0.25em; width: auto; }.form-field-stacked input[type="number"] { width: 3em; }

 <h2>Dynamic Form</h2> <form name="caesar"> <div class="form-field form-field-stacked"> <label>Message</label> <textarea name="message" rows="4" cols="24">Hello World</textarea> </div> <div class="form-field form-field-stacked"> <label>Amount</label> <input name="amount" type="number" value="13" /> </div> <div class="form-field form-field-stacked"> <label>Output</label> <textarea name="result" rows="4" cols="24" disabled="disabled"></textarea> </div> </form>