Javascript on change函数加载新站点

您好，我对Javascript有点陌生，我确实编写了一个函数，向网页添加了一个新的输入字段，但当按下按钮时，网站会重新加载，以前的更改也就消失了。我希望新的创建字段与新的输入保持一致，如果再次按下按钮，旧的输入字段也应该与新的文本保持一致。如果点击了按钮，站点就会加载新的，我如何防止这种情况发生

<div id="Attibutes">
    <label style="padding-left:5px"><b> Attributename</b></label><label style="padding-left:8px"><b>Attributwerte getrennt mit;</b></label><br>
    <!-- Attribute Namen bearbeiten -->      
    <%int numberAttributes = (Integer) request.getAttribute("numberAttributes");
    int count = numberAttributes;
    for (int i = 0; i < numberAttributes; i++ ) {%>
    <input type="text" onchange="showTable()" id="AttributeName<%=i%>" name="AttributeName<%=i%>" value="<%= request.getAttribute("attributeName"+ i)%>">
    <!-- Attrribute Zeilen bearbeiten -->        
    <input type="text" onchange="showTable()" id="AttributeLine<%=i%>" name="AttributeLine<%=i%>" value="<%= request.getAttribute("attributeLine"+ i)%>">
    <input type=button onchange="showTable()" id="ButtonDelete<%=i%>" value="Zeile löschen" onclick="removeLine(<%=i%>)">
    <br id="br<%=i%>">
   <% }%>
   </div>

归属于麻省理工学院

下面是我的javascript函数：

<input style="margin-left: 12px" type=button value="Zeile hinzufügen" onclick="add()">
            <script>
            function add() {
                counter++;
                var element = document.getElementById("Attibutes");
                var content = "";
                content += '<input type="text" onchange="showTable()" name="AttributeName' + counter + '" id="AttributeName' + counter + '" value="">';
                content += '<input style="margin-left: 6px" type="text" onchange="showTable()" name="AttributeLine' + counter + '"id="AttributeLine' + counter + '" value="">';
                content += '<input style="margin-left: 6px" type=button onchange="showTable()" name="AttributeName' + counter + '"id="ButtonDelete' + counter + '" value="Zeile löschen" onclick="removeLine(' + counter + ')">';
                content += '<br id="br' + counter + '">';
                element.innerHTML += content;
            }

函数add（）{
计数器++；
var元素=document.getElementById（“Attibutes”）；
var-content=“”；
内容+=''；
内容+=''；
内容+=''；
内容+='
；
element.innerHTML+=内容；
}

---

我一直在检查互联网，但找不到该网站再次加载的原因。谢谢您的帮助。

尝试添加

e.preventDefault（）

以单击函数。阅读更多关于

的内容，只是为了扩展@Halyna的答案——发生这种情况的原因是一个事实正在发生。这是

按钮

元素或具有属性

type=“submit”

或

type=“button”

的

输入

标记的默认行为

如果要阻止这种情况发生，应更新代码，使其看起来像：

<input style="margin-left: 12px" type=button value="Zeile hinzufügen" onclick="add(this)" />

function add(e) {
            counter++;
            var element = document.getElementById("Attibutes");
            var content = "";
            content += '<input type="text" onchange="showTable()" name="AttributeName' + counter + '" id="AttributeName' + counter + '" value="">';
            content += '<input style="margin-left: 6px" type="text" onchange="showTable()" name="AttributeLine' + counter + '"id="AttributeLine' + counter + '" value="">';
            content += '<input style="margin-left: 6px" type=button onchange="showTable()" name="AttributeName' + counter + '"id="ButtonDelete' + counter + '" value="Zeile löschen" onclick="removeLine(' + counter + ')">';
            content += '<br id="br' + counter + '">';
            element.innerHTML += content;
            e.preventDefault()
        }

功能添加（e）{
计数器++；
var元素=document.getElementById（“Attibutes”）；
var-content=“”；
内容+=''；
内容+=''；
内容+=''；
内容+='
；
element.innerHTML+=内容；
e、 预防默认值（）
}

您需要提供一个。您的代码既不完整也不最少。按钮就是这样做的，当它们放置在表单中时，它们会提交表单。