Question

因此有人要求我创建一个压缩字符串的函数。我试图创建一个javascript函数来做到这一点。但是看来，它暂时没有做任何事情。我不明白为什么无论输入什么，我的功能什么都不做。

function compression(input) {
  var charsToEscape = "#/%&+,!()*':;<=>?";
  var escaped = [];
  for (var i = 0; i < input.length; i++) {
    var testChar = input.substr(i, 1);
    if (charsToEscape.indexOf(testChar) > -1) {
      escaped.push("%" + testChar.charCodeAt(0).toString(16).toUpperCase());
    } else {
      escaped.push(testChar);
    }
  }
  return escaped.join("");
}

<label for="input">Input: Uncompressed Link URI</label>
<input type="text" id="input" class="form-control" name="input" value="">
<button onclick="compression(input)" name="button">Compressed </button>
<br><br>
<label for="compression">Output: Compressed Link URI</label>
<input type="text" id="compression" class="form-control" name="compression" value="">

您可以在上方看到html函数，这是我将输入，输出和应该进行压缩的javascript函数放置的位置。

但是现在他什么也没做。

在此先感谢大家提供的建议

Answer 1

1st：您没有使用输入元素的值，而是元素本身。因此必须将input替换为input.value
2nd：您返回了一个值，但未对其执行任何操作。因此，您可以创建一个新函数，该函数将获取该值并将其放入第二个输入中
第三：您的id的名字太笼统了。我将它们更改为更具体，并说出了不会干扰同一页面中其他元素的名称。

function compression(input) {
  var charsToEscape = "#/%&+,!()*':;<=>?";
  var escaped = [];
  for (var i = 0; i < input.value.length; i++) {
    var testChar = input.value.substr(i, 1);
    if (charsToEscape.indexOf(testChar) > -1) {
      escaped.push("%" + testChar.charCodeAt(0).toString(16).toUpperCase());
    } else {
      escaped.push(testChar);
    }
  }
  return escaped.join("");
}

function insertCompressed(output, value) {
  output.value = value
}

<label for="input">Input: Uncompressed Link URI</label>
<input type="text" id="compressionInput" class="form-control" name="input" value="">
<button onclick="insertCompressed(compressionOutput, compression(compressionInput))" name="button">Compressed </button>
<br><br>
<label for="compression">Output: Compressed Link URI</label>
<input type="text" id="compressionOutput" class="form-control" name="compression" value="">

Answer 2

我创建了一个onCompress函数，该函数将html元素用作输入。该函数获取所需的输入元素compression并为其分配压缩值。

function onCompress(input) {
  document.getElementById('compression').value = compression(input.value);
}

function compression(text) {
  var charsToEscape = "#/%&+,!()*':;<=>?";
  var escaped = [];
  for (var i = 0; i < text.length; i++) {
    var testChar = text.substr(i, 1);
    if (charsToEscape.indexOf(testChar) > -1) {
      escaped.push("%" + testChar.charCodeAt(0).toString(16).toUpperCase());
    } else {
      escaped.push(testChar);
    }
  }
  return escaped.join("");
}

<label for="input">Input: Uncompressed Link URI</label>
<input type="text" id="input" class="form-control" name="input" value="">
<button onclick="onCompress(input)" name="button">Compressed </button>
<br><br>
<label for="compression">Output: Compressed Link URI</label>
<input type="text" id="compression" class="form-control" name="compression" value="">

在HTML中创建压缩功能

2 个答案: