如何使 javascript 函数成为 html 属性？

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.

Answer 1

您需要在 script 标签中添加 JavaScript 以及在 body 中通过 id 获取的 p 标签一个 html 文件，像这样：

<!DOCTYPE html>

<html>
  <head>
    <title>Page</title>
  </head>

  <body>
    <form id="form">
      <div>
        <label for="str">String:</label>
        <input id="str" />
      </div>
      <div>
        <label for="amount">Amount:</label>
        <input id="amount" />
      </div>
      <button type="submit">Submit</button>
    </form>
    <p>CaesarShift: <span id="output"></span></p>

    <script>
      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;
      };

      const form = document.getElementById("form");
      form.addEventListener("submit", handleSubmit);

      function handleSubmit(event) {
        event.preventDefault();
        let str = document.getElementById("str").value;
        let amount = parseInt(document.getElementById("amount").value);
        let output = document.getElementById("output");
        console.log(amount);
        if (!amount) {
          output.innerHTML = `<span style="color: red">Amount not valid</span>`;
          return;
        }
        output.innerHTML = caesarShift(str, parseInt(amount));
      }
    </script>
  </body>
</html>

请参阅下面的代码片段和一个工作示例：

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;
};

const handleSubmit = (e) => e.preventDefault();

const updateResult = () => {
  amount = parseInt(document.getElementById("amount").value);
  let output = document.getElementById("output");
  if (!amount) {
    output.innerHTML = `<span style="color: red">Amount not valid</span>`;
    return;
  }
  output.innerHTML = caesarShift(
    document.getElementById("text").value,
    parseInt(amount)
  );
};

const form = document.getElementById("form");
form.addEventListener("submit", handleSubmit);

let text = document.getElementById("text");
text.addEventListener("keyup", updateResult);
text.addEventListener("blur", updateResult);

let amount = document.getElementById("amount");
amount.addEventListener("change", updateResult);
amount.addEventListener("blur", updateResult);

<form id="form">
  <div>
    <label for="text">Text:</label>
    <textarea id="text"></textarea>
  </div>
  <div>
    <label for="amount">Amount:</label>
    <input id="amount" />
  </div>
</form>
<p>CaesarShift: <span id="output"></span></p>

如何使 javascript 函数成为 html 属性？

How do I make a javascript function a html attribute?

html

javascript

encryption

caesar-cipher