App Lab's readRecords() changes elements' ids

Question

I'm making a fairytale in AppLab. I used a database that I called "story", which contains story events and whether the game started (I didn't make the game yet). Anyway, I have to readRecords() events from the database, and create a textLabel in the callback function (I can't create textAreas, but please correct me if I'm wrong). For every textLabel, there is supposed to be a unique ID: "event"+scrN. If I run my whole function once, everything goes how it's supposed to be, but if I run it twice, it says WARNING: Line: 10: The textLabel() id parameter refers to an id ("event2") which already exists., though the first element is supposed to be "event1". I put console.log(textID) and it printed twice "event2". If you don't understand what I mean, here is the code:

var scr = "screen";
var scrN = 0;
var maxWidth = 320;
var maxHeight = 450;
function create(widType, id, text, x, y, width, height) {
  if (widType === "button") {
    button(id, text);
  }
  else if (widType === "text") {
    textLabel(id, text);
  }
  setProperty(id, "x", x);
  setProperty(id, "y", y);
  setProperty(id, "width", width);
  setProperty(id, "height", height);
  if (widType === "text") {
    setProperty(id, "background-color", rgb(0,0,0,0));
    setProperty(id, "border-color", rgb(0,0,0,0));
    setProperty(id, "text-color", rgb(0,0,0));
    setProperty(id, "font-size", 17.5);
  }
  else if (widType === "button") {
    setProperty(id, "text-color", rgb(0,0,0));
    setProperty(id, "font-size", 16);
  }
}

function screenChange(dir) {
  if (dir === "NEXT") {
    scrN++;
  }
  else if (dir === "BACK") {
    scrN--;
  }
  if (dir === "NEXT") {
    setScreen(scr+scrN);
    var buttonWidth = 80;
    var buttonHeight = 40;
    var next = "Next";
    var nextID = next.toLowerCase()+scrN;
    var nextx = 220;
    var nexty = 400;
    create("button", nextID, next,
    nextx, nexty, buttonWidth, buttonHeight);
    var back = "Back";
    var backID = back.toLowerCase()+scrN;
    var backx = -80;
    var backy = nexty;
    create("button", backID, back,
    backx, backy, buttonWidth, buttonHeight);
    readRecords("story", {}, function(records) {
      var textID = "event"+scrN;
      console.log(textID);
      create("text", textID, records[scrN-1].event,
      0, -50, maxWidth, 90);
    });
  }
}
screenChange("NEXT");
screenChange("NEXT");

I need help! Is the readRecords function changing the textID variable for the past calls of the main function? If so what can I do about it? Thanks

Answer 1

You can create text areas in the Design tab. You can also parent each element to the text area using the setParent() block.

setParent(id, parentId);

To clear out the text area and add new elements, simply set the text of the text area to "".