Want to replace text with new element instead of adding a new element

p5.js
1

Hi i’m trying to make a random message generator using data from a JSON file https://github.com/dariusk/corpora/blob/master/data/games/dark_souls_iii_messages.json

Here’s what i’ve got so far. I can get the buttons to add a random words and phrases from ‘templates’ and ‘creatures’ but if the buttons are pressed multiple times more strings are added, making a list, when i’m trying to make it so that only one of each is showing and if one of the buttons is pressed the current creature/template is replaced by a new random one.

Hope this makes sense

Thanks

let templates;
let first;
let creatureButton;
let creature;
let tempButton;
let temp;

function preload() {
  data = loadJSON("DS3.json")
}

function setup() {
  noCanvas();
  tempButton = createButton('Click for random template')
  creatureButton = createButton('Click for random creature');
  creatureButton.mousePressed(creatureClick);
  tempButton.mousePressed(tempClick);
}

function creatureClick() {
  creature = createElement('p', data.words.creatures[Math.floor(random(0, data.words.creatures.length))]);
}

function tempClick() {
  temp = createElement('p', data.templates[Math.floor(random(0, data.templates.length))]);
}
2

Would Node.textContent or Element.innerHTML be helpful? You might be able to declare creature and temp as global variables, assign them in setup, then access their content via the elt field of the p5.Element created by createElement.

1 Like
3

I know next to nothing about Node so I had a look into Element.innerHTML and that seems to have done the trick. Thanks alot

let templates;
let first;
let creatureButton;
let creature;
let tempButton;
let template;

function preload() {
  data = loadJSON("DS3.json")
}

function setup() {
  noCanvas();
  tempButton = createButton('Click for random template')
  creatureButton = createButton('Click for random creature');
  creatureButton.mousePressed(creatureClick);
  tempButton.mousePressed(tempClick);
  template = select('#template');
  creature = select('#creature');
}

function creatureClick() {
  document.getElementById("creature").innerHTML=data.words.creatures[Math.floor(random(0, data.words.creatures.length))];
  //creature = createElement('p', data.words.creatures[Math.floor(random(0, data.words.creatures.length))]);
}

function tempClick() {
  document.getElementById("template").innerHTML=data.templates[Math.floor(random(0, data.templates.length))];
  //temp = createElement('p', data.templates[Math.floor(random(0, data.templates.length))]);
}