JavaScript上的form和innerHTML的问题

-1

昨天我编写了一个代码，用于在文本内容中显示您在表单输入中编写的内容。我写了这个：JavaScript上的form和innerHTML的问题

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

这段代码的问题是，当你点击按钮，它代替了几次文本，然后刷新页面。我怎样才能解决这个问题？

来源

2016-05-17 step

删除表单元素，并应该解决您的问题。 –

不要绑定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>

这具有访问，并允许功能，如隐含提交的优势，当用户点击输入而文本字段被聚焦。

来源

2016-05-17 20:19:55 zzzzBov

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

来源

2016-05-17 20:41:51 Barmar

JavaScript上的form和innerHTML的问题

回答

相关问题