gpt4 book ai didi

javascript - innerHTML 显示后迅速消失

转载 作者:行者123 更新时间:2023-11-30 13:48:50 26 4
gpt4 key购买 nike

我试图制作一个“查找和替换”页面,我的代码工作正常,除了结果字符串只显示一瞬间,然后它消失并且表单被重置

这是HTML

<body>
<form>
Text<textarea id="string"></textarea>
<br>
Find:<input type="text" id="keyword">
<br>
Replace with:<input type="text" id="replacewith">
<button id="replace" onclick="findReplace()">Find and Replace</button>
</form>
<p id="result"></p>
</body>

这是js

<script>
function findReplace(){
var str = document.getElementById("string").value;
var input = document.getElementById("keyword").value;
var replaced = document.getElementById("replacewith").value;
var x = str.replace(input, replaced);
document.getElementById("result").innerHTML = x;
}
</script>

最佳答案

您必须通过以下任一方式阻止表单提交:
- 使用 findReplace 作为提交事件处理程序并调用 event.preventDefault()
- 添加 type="button" 到按钮元素。 (h/t radulfr )
- 添加 onsubmit="return false" 到您的表单元素:

function findReplace() {
var str = document.getElementById("string").value;
var input = document.getElementById("keyword").value;
var replaced = document.getElementById("replacewith").value;
var x = str.replace(input, replaced);
document.getElementById("result").innerHTML = x;
}
<form onsubmit="return false">
Text<textarea id="string"></textarea>
<br> Find:
<input type="text" id="keyword">
<br> Replace with:<input type="text" id="replacewith">
<button id="replace" onclick="findReplace()">Find and Replace</button>
</form>
<p id="result"></p>

关于javascript - innerHTML 显示后迅速消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58713795/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com