javascript - 来自同一个按钮的多次打印？ html

Question

我有输入字段和提交按钮，单击按钮会在网页上显示输入。当我输入一条新消息时，它只显示此消息，并删除旧消息。我怎样才能单击按钮并仍然保留旧消息和新消息？

function outputdisplayname(){
            var x, y, z;
            x = document.getElementById('form1');
            y = x.elements["name"].value;
            z = x.elements["message"].value;

            document.getElementById("demo1").innerHTML=y;
            document.getElementById("demo2").innerHTML=z;
}

body {
 background-color: lightgrey;
}

<form id = "form1">
        Name: <input name = "name" type = "text" size = "20" id = "text1"/>
        Message: <input name = "message" type = "text" size ="20" id = "text2"/>
</form>

<button onclick="outputdisplayname()">Display</button>

<p id = "demo1"></p>
<p id = "demo2"></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

改变

document.getElementById("demo1").innerHTML = y;

到

document.getElementById("demo1").innerHTML += y;

您只需在单击按钮之前确保 demo1 为空即可。