So ich hab das jetzt mal ein wenig geändert, hab das jetzt im Grunde eigentlich genau so wie ich möchte, das einzige Problem welches ich habe, sobald ich ein Raum updaten möchte funktioniert das immer nur bei dem Letzten Raum, bsp. ich erstelle 3 Räume und möchte im ersten Raum die Werte ändern klappt nicht, bei Raum 3 würde es aber Funktionieren : Hier der Aktuelle code von mir :
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("data-toggle", `modal`);
room.setAttribute("data-target", `#room${roomname}`);
document.getElementById("rooms").appendChild(coldiv).appendChild(room);
document.getElementById("rooms").innerHTML += '<div class="modal fade" id="'+ `room${document.getElementById('innerhtml').value}` +'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><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">×</span></button></div><div class="modal-body"><table class="table table-hover"><thead><tr><th scope="col">Gegenstand</th><th scope="col" class="text-right">Anzahl</th></tr></thead><tbody><tr><td>Tisch</td><td class="text-right"><div class="value-button decrease" id="decrease" onclick="decreaseValue(\''+ `${document.getElementById('innerhtml').value}_tisch` +'\')" value="Decrease Value">-</div><input class="number" type="number" id="'+ `${document.getElementById('innerhtml').value}_tisch` +'" value="0" /><div class="value-button increase" id="increase" onclick="increaseValue(\''+ `${document.getElementById('innerhtml').value}_tisch` +'\')" value="Increase Value">+</div></td></tr><tr><td>Schrank</td><td class="text-right"><div class="value-button decrease" id="decrease" onclick="decreaseValue(\''+ `${document.getElementById('innerhtml').value}_schrank` +'\')" value="Decrease Value">-</div><input class="number" type="number" id="'+ `${document.getElementById('innerhtml').value}_schrank` +'" value="0" /><div class="value-button increase" id="increase" onclick="increaseValue(\''+ `${document.getElementById('innerhtml').value}_schrank` +'\')" value="Increase Value">+</div></td></tr></tbody></table></div><div class="modal-footer"><button data-dismiss="modal" aria-label="Close" class="btn btn-primary" id="'+ `saveall${document.getElementById('innerhtml').value}` +'">Gegenstände Speichern</button></div></div></div></div>';
var rooms = [];
var Room = function() {
this.tables = 0;
this.chairs = 0;
this.carpets = 0;
};
function addRoom(name, data)
{
rooms[name] = data;
}
function updateRoom(name, key, value)
{
rooms[name][key] = value;
}
document.getElementById(`saveall${roomname}`).onclick = function() {
if (rooms[`${roomname}`] === undefined){
var roomData = new Room();
roomData.tables = document.getElementById(`${roomname}_tisch`).value;
roomData.chairs = document.getElementById(`${roomname}_schrank`).value;
roomData.carpets = 1;
addRoom(roomname, roomData);
console.log(rooms);
}else{
updateRoom(`${roomname}`, "tables", document.getElementById(`${roomname}_tisch`).value);
}
};
document.getElementById('innerhtml').value = '';
}
function increaseValue(a) {
var inVal = a;
var value = parseInt(document.getElementById(inVal).value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById(inVal).value = value;
}
function decreaseValue(b) {
var deVal = b;
var value = parseInt(document.getElementById(deVal).value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById(deVal).value = value;
}
eventuell hat da ja jemand eine Lösung...
