Question

您好我是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;
            }

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

Answer 1

尝试将e.preventDefault()添加到功能点击中。阅读MDN

的更多信息

Answer 2

只是为了扩展@Halyna的答案 - 发生这种情况的原因是form submission实际上正在发生。这是button元素或具有属性input或type="submit"的{{1}}标记的默认行为。

如果您想阻止这种情况发生，您应该将代码更新为：

type="button"

更改功能上的Javascript加载网站新功能

2 个答案: