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);
  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);
  }

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

Answer 1

此语句引起了问题：

CALL db.index.fulltext.queryNodes(
"property_search_index", 
"name:\\?\\?\\?\\.\\.\\.\\/\\/\\/\\*\\*\\*~"
) YIELD node AS property, score

读取Rooms元素的document.getElementById("rooms").innerHTML += '<div ... // etc属性，并将其与innerHTML的右侧串联并写回。读取时，它将返回已经在rooms元素中的textarea元素的标签，但不包含其内容。因此，每次添加新房间时，它都会重新创建现有的textarea，其中没有任何内容。

引入了Element.insertAdjacentHTML()方法来解决这个确切的问题。从风格上讲，我不建议使用+=作为元素ID。

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

1 个答案: