CODEWITHSUNDEEP
javascripthtml
Dustin Justream
Dustin Justream

Reputation: 21

Why reset my value after create new textarea?

I have following problem, with this code i can create a room with a textarea, after i fill this with values and create a new room and fill again will resets all first textarea's only the last have values...

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

how i say i got every time only the last value of the textarea, I need all values, why reset the other values? What have i wrong?

Upvotes: 0

Views: 86

Answers (1)

traktor
traktor

Reputation: 19301

This statement is causing the problem:

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

The innerHTML property of the rooms element is read, concatenated with the right hand side of += and written back. When read, it returns the tags of textarea elements already in the rooms element, but not their content. So every time you add a new room it recreates existing textareas with nothing in them.

The Element​.insert​Adjacent​HTML() method was introduced to solve this exact issue. Stylistically I would not recommend the use of "innerhtml" as an element id.

Upvotes: 1

Related Questions