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

传播你的旧内容，你正在覆盖innerHTML，当然旧内容会消失。

而不是：

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

使用：

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

如果你想要换行，你可以简单地使用像br：

这样的html标签

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

//////////////////

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

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

使用JQuery，通过ID访问元素并更改其值更加容易。您可以获得很多好处，例如在后台为您提供出色的浏览器兼容性，以及各种功能和非常简单的元素选择器等等。

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

例如：

$("#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

如何在页面上保留javascript响应？

1 个答案: