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

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

javascript html encryption

如何使javascript函数成为html属性？,javascript,html,encryption,caesar-cipher,Javascript,Html,Encryption,Caesar Cipher,我有一个带参数的javascript变量，但我不知道如何将其传递到html代码中。javascript代码取自：但我不知道如何把这些加在一起。如何调用该变量？对于字符串，我有一个文本区域输入框，可能还有一个用于第二个参数amount的clicker，但我不知道如何将其全部放在HTML中。您需要在脚本标记和HTML文档的正文中通过id获得的p标记中设置JavaScript，像这样： <!DOCTYPE html> <html> <head> &l

我有一个带参数的javascript变量，但我不知道如何将其传递到html代码中。javascript代码取自：

但我不知道如何把这些加在一起。如何调用该变量？对于字符串，我有一个文本区域输入框，可能还有一个用于第二个参数amount的clicker，但我不知道如何将其全部放在HTML中。

您需要在

脚本

标记和HTML文档的

正文

中通过

id

获得的

标记中设置JavaScript，像这样：

<!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=函数（str，金额）{
//包装数量
如果（金额<0）返回caesarShift（str，金额+26）；
//生成一个输出变量
var输出=”；
//检查每个字符
对于（变量i=0；i=65&&code=97&&code=65&&code=97&&code e.preventDefault（）；
常量更新结果=（）=>{
amount=parseInt（document.getElementById（“amount”）.value）；
让output=document.getElementById（“output”）；
如果（！金额）{
output.innerHTML=`金额无效'；
返回；
}
output.innerHTML=caesarShift(
document.getElementById（“text”）.value，
parseInt（金额）
);
};
const form=document.getElementById（“表单”）；
表格。附录列表（“提交”，可处理提交）；
让text=document.getElementById（“text”）；
text.addEventListener（“keyup”，updateResult）；
text.addEventListener（“模糊”，updateResult）；
let amount=document.getElementById（“金额”）；
金额。addEventListener（“变更”，更新结果）；
amount.addEventListener（“blur”，updateResult）；


正文：
数量：
CaesarShift:

需要提供任何解释吗？您到底做了什么或更改了什么？此代码是如何工作的？谢谢！我不知道我怎么看不到这一点。但是有没有办法让字符串和班次号成为用户输入的？是的，您需要添加

输入

字段，然后获取它们的值。您可以根据我的examp自行尝试你可以通过分享你尝试过的内容来打开另一个问题。这就是问题的目的。我不知道如何使用javascript来请求字符串和移位号，也不知道如何做提交表单之类的事情。@PythonicOreo，我已经更新了我的答案，以实现你想要的。如果这有帮助，请合作n接受命令：）--我还添加了一个初步检查，以查看金额是否为数字。如果您有任何进一步的问题，请告诉我。您可以单击“运行代码片段”来测试代码。此外，请查看--这将有助于您了解发生了什么。

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

<!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>