Javascript 在同一頁面上顯示innerHTML

Question

所以我正在測試 D3.js 的置換 function ，它工作得很好。 我遇到的問題是使用 innerHTML 在同一頁面上顯示結果，它總是重新加載以顯示。 我可能在這里遺漏了一個細節，有人可以幫忙嗎？

置換.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>

Answer 1

當您點擊提交按鈕時，頁面將自動重新加載。 您應該通過調用傳遞給事件處理程序的事件 object 的preventDefault方法來防止這種情況發生，在您的情況下，該處理程序將是showPermutations 。

使 function 接收一個參數，稱為e 、 ev或event （通常稱為），並在其中執行preventDefault方法，然后再執行其他任何操作。

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

或者不要使用提交按鈕。

Javascript 在同一頁面上顯示innerHTML

問題描述

1 個解決方案

解決方案1
0 2021-01-12 13:14:57

Javascript 在同一頁面上顯示innerHTML

問題描述

1 個解決方案

解決方案1 0 2021-01-12 13:14:57

解決方案1
0 2021-01-12 13:14:57