JavaScript上的表单和innerHTML问题

Problems with form and innerHTML on JavaScript

本文关键字：innerHTML 问题 表单 JavaScript      更新时间：2023-09-26

昨天我编写了一个代码，在文本内容中显示您在表单输入中所写的内容。我写了这个：

<p id="demo">
Show code
</p>
<form>
    <input type="text" id="clo" />
    <button onclick="myFunctionn()">Try it</button>
    <script type="text/javascript">
        //<![CDATA[
        function myFunctionn() {
            var bub = document.getElementById("clo").value
            var str = document.getElementById("demo").innerHTML; 
            var res = str.replace("code", bub);
            document.getElementById("demo").innerHTML = res;
        }
        //]]>
    </script>
</form>

此代码的问题在于，当您单击按钮时，它会替换文本几次，然后刷新页面。我该怎么解决这个问题？

不要绑定click处理程序。在表单上绑定一个submit处理程序并防止默认行为。

<form>
    <input type="text" id="clo" /> <button type="submit">Try it</button>
</form>
<script>
function myFunction(e) {
    var bub = document.getElementById("clo").value
    var str = document.getElementById("demo").innerHTML; 
    var res = str.replace("code", bub);
    document.getElementById("demo").innerHTML = res;
    e.preventDefault();
}
document.querySelector('form').addEventListener('submit', myFunction, false);
//and keep your JS out of your HTML
</script>

这具有可访问性的优点，并允许在用户在文本字段集中时点击Enter时进行隐式提交等功能。

将type="button"添加到按钮中。按钮的默认类型是submit，因此它将您的表单提交给服务器，服务器将刷新页面。非提交按钮不会导致表单提交，因此只会执行Javascript。

相关文章：