为什么在创建新的文本区域后重置我的值？

Question

我有以下问题，使用此代码我可以创建一个具有textarea的房间，在我用值填充此值并创建一个新房间并再次填充后，将重置所有第一个textarea的只有最后一个具有值的...

var rooms = {};

function addRoom(name, data) {

  rooms[name] = data;

}

function updateRoom(name, key, value) {

  rooms[name][key] = value;

}

var Room = function() {

  this.description = 0;

};

function createroom() {

  var roomname = document.getElementById('innerhtml').value;

  var coldiv = document.createElement('div');

  coldiv.className = "col-md-6 mb-3";

  coldiv.setAttribute("id", `room_col_${roomname}`);

  var room = document.createElement('div');

  room.className = "text-center roombox";

  room.innerHTML = roomname;

  room.setAttribute("id", `room_count_${roomname}`);

  room.setAttribute("data-toggle", `modal`);

  room.setAttribute("data-target", `#room${roomname}`);

  var roomnamehidden = document.createElement('input');

  roomnamehidden.setAttribute("name", "roomname");

  roomnamehidden.setAttribute("type", "hidden");

  roomnamehidden.setAttribute("value", `${roomname}`);

  document.getElementById("rooms").appendChild(coldiv).appendChild(room);

  document.getElementById("rooms").appendChild(roomnamehidden);

我怎么说我每次只获得textarea的最后一个值，我需要所有值，为什么要重置其他值？我怎么了？

Answer 1

该语句引起了问题：document.getElementById("rooms").innerHTML&nbsp;+=&nbsp;'<div&nbsp;...&nbsp;//&nbsp;etcinnerHTML读取rooms元素的属性，并将其与的右手边串联+=并写回。读取时，它返回已经在rooms元素中的textarea元素的标签，但不返回其content。因此，每次添加新房间时，它都会重新创建现有的textarea，其中没有任何内容。该元素.insert相邻的HTML（）被介绍的方法来解决这个确切的问题。从风格上讲，我不建议将其&nbsp;"innerhtml"用作元素ID。