0

所以我正在测试 D3.js 的置换功能，它工作得很好。我遇到的问题是使用 innerHTML 在同一页面上显示结果，它总是重新加载以显示。我可能在这里遗漏了一个细节，有人可以帮忙吗？

permute.html：

<html>
 <head>
 <meta charset="UTF-8">
 <script language="JavaScript">
 function* permute(keys) {
    var size = keys.length,
        c = Array(size).fill(0),
        i = 1;
    yield keys;
    while (i < size) {
        if (c[i] < i) {
            var k = i % 2 && c[i];
            [keys[i], keys[k]] = [keys[k], keys[i]];
            c[i]++;
            i = 1;
      yield keys;
    } else {
      c[i++] = 0;
    }
  }
}

function showPermutations(){
    var input = document.getElementById("keys").value;
    document.getElementById('results').innerHTML=input;
    for (var words of permute(input.split(/\s+/))) {
        document.write(words.join(''));
        document.write("<br>");
    }
}
</script>

<body>
  <form>
    <label><b>Keywords</b></label></br>
    <input type="text" id="keys" name="keys"></br>
  </form>
    </br>
<input type="submit" value="Permute" onclick="showPermutations();"></br>
<p><span id='results'></span></p>
</head>
</body>
</html>

你们中的一些人指出问题是由提交按钮引起的，但在另一个示例中，使用提交，JS 在同一页面上工作得很好：

测试.html

<html>
  <head lang="en">
  <meta charset="UTF-8">
  <script language="JavaScript">
    function showInput() {
        document.getElementById('display').innerHTML = 
                    document.getElementById("user_input").value;
    }
  </script>

  </head>
<body>

  <form>
    <label><b>Enter a Message</b></label>
    <input type="text" name="message" id="user_input">
  </form>

  <input type="submit" onclick="showInput();"><br/>
  <label>Your input: </label>
  <p><span id='display'></span></p>
</body>
</html>
4

1 回答 1

0

当您点击提交按钮时，页面将自动重新加载。您应该通过调用preventDefault传递给事件处理程序的事件对象的方法来防止这种情况发生，在您的情况下，该处理程序将是showPermutations.

使该函数接收一个参数，称为e,ev或event（通常称为）并在其中执行该preventDefault方法，然后再执行其他任何操作。

function showPermutations(e){
   e.preventDefault();
   ...
}

或者不要使用提交按钮。

于 2021-01-12T13:14:57.133 回答