我正在尝试创建一个机器人，我希望我的所有消息都包含在 JS 中的同一个 div 中

Question

所以我正在创建一个聊天机器人，现在我的文本在我输入时出现，但并非全部出现在同一个 div 中。发送第一条消息后，其余消息将出现在输入表单下方。

我尝试应用我在顶部按钮上使用的相同元素，但仍然无法正常工作。因为它使初始消息消失。我希望所有消息都保留在当前状态。

var btnClick = function(text) {
  counter++;
    if (counter == 1) {
        document.getElementById("upDateText").innerText
        let newElement = document.createElement("h1");
        newElement =  = "I am " + text + "!";
        newElement.style.textAlign = "right";
        newElement.innerText = "Hi " + text + "!";
        document.body.appendChild(newElement);
        createHobbies();
      } else if (counter == 2) {
        let newElement = document.createElement("h1");
        let hobbies = 'your hobies here';
        newElement.innerText =
          "that is so cool that you like" + hobbies + " can we be friends"; // your "hobies" is not defined!
        document.body.appendChild(newElement);
      } 

  if (form.inputbox.value === "") {
    let newElement = document.createElement("h1");
    newElement.style.color = "red";
    newElement.innerText = "sorry bout that";
    document.body.appendChild(newElement);
  }
};

Answer 1

只需将方法从 body 更改为 getElementById("upDateText")

var btnClick = function(text) {
  counter++;

  if (counter == 1) {
    document.getElementById("upDateText").innerText = "I am " + text + "!";
    let newElement = document.createElement("h1");
    newElement.style.textAlign = "right";
    newElement.innerText = "Hi " + text + "!";

    document.getElementById("upDateText").appendChild(newElement);
    createHobbies();
  } else if (counter == 2) {
    let newElement = document.createElement("h1");
    let hobbies = 'your hobies here';
    newElement.innerText =
      "that is so cool that you like" + hobbies + " can we be friends"; // your "hobies" is not defined!
    document.getElementById("upDateText").appendChild(newElement);
  } 

  else if (form.inputbox.value === "") {
    let newElement = document.createElement("h1");
    newElement.style.color = "red";
    newElement.innerText = "sorry bout that";
    document.getElementById("upDateText").appendChild(newElement);
  }
};

我正在尝试创建一个机器人，我希望我的所有消息都包含在 JS 中的同一个 div 中

I'm trying to create a bot and I would like all my messages to be contained with in the same div in JS

javascript

forms

chat