如何在页面上保留JavaScript响应

Question

我正在创建一个非常基本的机器人聊天小部件，到目前为止，我有下面的代码，我想知道如何将响应保留在页面上？而不是在输入字段中输入新内容后它们消失？最好一个在另一个下面。

所以输出将是这样的："你怎么样？"谢谢你自己？"

<script>
function submit() {
    var userMsg = document.getElementById('user').value;
     var userImput = userMsg.toLowerCase();
  switch(userImput){
case 'hello':
document.getElementById('computerMsg').innerHTML = "Hello";
break;
case 'how are you?':
document.getElementById('computerMsg').innerHTML = "Good thanks, yourself?";
break;
case 'good':
document.getElementById('computerMsg').innerHTML = "Great";
break;
case 'how old are you?':
document.getElementById('computerMsg').innerHTML = "Im a computer, so I dont age!";
break;
default:
document.getElementById('computerMsg').innerHTML = "sorry, i dont understand.";
}
}
</script>
<p id="userMsg"></p>
<p id="computerMsg"></p>
<input type="text" id="user" />
<button onclick="submit();" href="javascript:;">Submit</button>

Answer 1

连接

你的旧内容，你正在覆盖内部HTML，当然旧内容会消失。

而不是：

document.getElementById('computerMsg').innerHTML = "Hello";

用：

var element = document.getElementById('computerMsg');
element.innerHTML = element.innerHTML + "Hello";

如果你想要一个新行，你可以简单地使用 html 标签，如 br：

var element = document.getElementById('computerMsg');
element.innerHTML = element.innerHTML + "Hello<br />";

///

/

以下内容只是一个可选提示。

也许你应该考虑使用或熟悉JQUery。

使用 JQuery，按 ID 访问元素和更改其值要容易得多。您有很多好处，例如在后台为您考虑出色的浏览器兼容性，以及广泛的功能和非常简单的元素选择器等等。

每个选项都只是一个简单的单行：

例如：

$("#computerMsg").append("Hello"); //Add some content
$("#computerMsg").prepend("Hello"); //Add some content at the beginning
$("#computerMsg").html("Hello"); //Overwrite Content
var content = $("#computerMsg").html(); //Read content