Question

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

<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>

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

Answer 1

不要绑定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 时允许隐式提交等功能。

Answer 2

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

JavaScript上的form和innerHTML问题

2 个答案: