Javascript在同一页面上显示innerHTML
Posted
技术标签:
【中文标题】Javascript在同一页面上显示innerHTML【英文标题】：Javascript display innerHTML on the same page 【发布时间】：2021-04-17 10:20:07 【问题描述】：所以我正在测试 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>
【问题讨论】：
我能看到的第一件事是你没有关闭你的<head>标签.. ;)
谢谢，已编辑。但这绝对不是导致问题的原因:)
通过您的编辑，您现在在<head> 标记内有一个<body> 标记。那是无效的。无论如何，如果您不想提交输入元素，请不要将它们放在<form> 标签内。
或者阻止表单提交，而不是<input type=“submit” />使用<button type=“button”>?
也不行
【参考方案1】：
当您单击提交按钮时，页面将自动重新加载。您应该通过调用传递给事件处理程序的事件对象的preventDefault 方法来防止这种情况发生，在您的情况下，该处理程序将是showPermutations。
使该函数接收一个参数，称为e、ev 或event（通常称为）并在其中执行preventDefault 方法，然后再执行其他任何操作。
function showPermutations(e)
e.preventDefault();
...
或者不要使用提交按钮。
【讨论】：
"当您点击提交按钮时，页面会自动重新加载。" 当按钮不在表单内时，则不是这样，这里似乎就是这种情况。此外，preventDefault 仅适用于提交事件，而不适用于点击事件。
我使用了函数参数 showPermutations(e) console.log(typeof e.preventDefault); ..但它仍然无法正常工作。使用按钮而不是提交也不起作用。您可以将代码复制并粘贴到 html 文件中并尝试一下。有什么想法吗？以上是关于Javascript在同一页面上显示innerHTML的主要内容，如果未能解决你的问题，请参考以下文章