问题描述
所以我正在测试 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 在同一页面上工作得很好:
test.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>
解决方法
当您单击提交按钮时,页面将自动重新加载。您应该通过调用传递给事件处理程序的事件对象的 preventDefault
方法来防止这种情况发生,在您的情况下,该处理程序将是 showPermutations
。
使该函数接收一个参数,称为 e
、ev
或 event
(通常称为),并在其内部,在执行任何操作之前执行 preventDefault
方法否则。
function showPermutations(e){
e.preventDefault();
...
}
或者不要使用提交按钮。