更改功能上的 Javascript 加载新站点答案

【问题标题】：Javascript on change function loads site new更改功能上的 Javascript 加载新站点
【发布时间】：2018-03-12 10:55:31
【问题描述】：

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

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

【问题讨论】：

您需要提供minimal reproducible example。您的代码既不完整也不最小。
这就是按钮的作用，当它们被放置在表单中时，它们会提交表单。

标签： javascript input onchange

【解决方案1】：

尝试将e.preventDefault() 添加到功能点击。阅读更多关于MDN

【讨论】：

【解决方案2】：

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

如果你想阻止这种情况的发生，你应该更新你的代码看起来像这样：

<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()
        }

【讨论】：