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

Question

我有以下问题，使用这段代码，我可以创建一个带有文本区域的房间，在我用值填充它并创建一个新房间并再次填充后，将重置所有第一个文本区域，只有最后一个有值...

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);
  document.getElementById("rooms").innerHTML += '<div class="modal fade" id="' + `room${document.getElementById('innerhtml').value}` + '" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" xmlns="http://www.w3.org/1999/html"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Inventar für <b>' + `${document.getElementById('innerhtml').value}` + '</b> hinzufügen</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"><textarea name="description" class="form-control" rows="5" placeholder="description here..." id="' + `${document.getElementById('innerhtml').value}_description` + '"></textarea></div><div class="modal-footer"><button data-dismiss="modal" aria-label="Close" class="btn btn-primary" onclick="updateRoomItems(\'' + `${document.getElementById('innerhtml').value}` + '\')" id="' + `saveall${document.getElementById('innerhtml').value}` + '">Gegenstände Speichern</button></div></div></div></div>';
  document.getElementById('innerhtml').value = '';
}

function numKeys(obj) {
  var count = 0;
  for (var prop in obj) {
    count++;
  }
  return count;
}

function updateRoomItems(a) {
  var roomname = a;
  if (rooms[`${roomname}`] === undefined) {
    var roomData = new Room();
    roomData.description = document.getElementById(`${roomname}_description`).value;
    addRoom(`${roomname}`, roomData);
    console.log(rooms);
  } else {
    updateRoom(`${roomname}`, "description", document.getElementById(`${roomname}_description`).value);
  }

我怎么说我每次都只得到文本区域的最后一个值，我需要所有值，为什么要重置其他值？我有什么错吗？

Answer 1

此语句导致了问题:

document.getElementById("rooms").innerHTML += '<div ... // etc 

读取 rooms 元素的 innerHTML 属性，与 += 的右侧连接并写回。读取时，它返回 rooms 元素中已有的 textarea 元素的标签，但不返回其内容。因此，每次您添加新房间时，它都会重新创建其中没有任何内容的现有文本区域。

Element​.insert​Adjacent​HTML()引入方法来解决这个确切的问题。从风格上来说，我不建议使用 "innerhtml" 作为元素 id。