Question

当使用innerHTML更改带有函数的html元素时，html元素会更改，但页面会立即重新加载并将元素设置回原始值。如何避免这种情况？

我意识到我可能遗漏了一些非常重要的东西，感觉有点尴尬地发起这个问题。但是，我搜索了这个问题，我找不到答案。如果有人可以花一点时间让我在这个html，javascript，css和我试图找到自己的方式的PHP森林中走上正轨，我将非常感激。

<!DOCTYPE html>
<html>
    <head>
        <title>Question stackoverflow</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>
            <p id="test"> This should be changed after button click </p>
            <form>
                <button onclick="test()">Refresh</button>
            </form>     
        </div>
        <script>
        function test(){
                document.getElementById("test").innerHTML = "replaced";
            }
        </script>
    </body>
</html>

Answer 1

您只需忽略默认事件即可阻止回发。也就是说，如果您不想回发到服务器。

<!DOCTYPE html>
<html>
    <head>
        <title>Question stackoverflow</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>
            <p id="test"> This should be changed after button click </p>
            <form>
                <button onclick="test(event)">Refresh</button>
            </form>     
        </div>
       <script>
        function test(event){
            document.getElementById("test").innerHTML = "replaced";
            event.preventDefault()
        }
       </script>
    </body>
</html>

Answer 2

在type="button"。

中添加button

<button type="button" onclick="test()">Refresh</button>

默认情况下，按钮的类型被视为submit，因此在单击按钮时提交表单。

Answer 3

感谢所有答案。你给了我明确的进一步探索指导。我认为我得到了本质：当一个表单提交给服务器时，它会触发一个完整的页面重新加载，再次从他的初始状态读取初始状态。

感谢大家的宝贵意见。不幸的是，我只能勾选一个答案，但所有答案都可以回答我的问题，相互补充，甚至提供相关的额外建议。

Answer 4

您无需将按钮放在<form>中，并将属性type="button"添加到<button>。
表单将提交并刷新页面，我认为这是您遇到问题的原因。

顺便说一下，不要在文件的末尾写下您的脚本，将其放在<head>中并将属性onload="myInitFunction();"添加到您的{{1} }}。
你这样做是一种坏习惯。

另一种方法：
将您的脚本链接为<body>中的外部文件 <head>
而不是做

<script src="pathtojsfile/script.js"></script>

您可以在script.js

的末尾写下此内容

<body onload="myInitFunction();">[...]</body>

最后一件事： 当您需要插入类似HTML块的内容时，请使用window.onload = myInitFunction; 如果您只想添加文字，请使用element.innerHTML

避免在使用函数调用进行innerHTML更新后重新加载页面

4 个答案: