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

**URL:** <https://discourse.processing.org/t/want-to-replace-text-with-new-element-instead-of-adding-a-new-element/1458>\
**Category:** p5.js\
**Created:** [July 3, 2018, 10:47am UTC](https://discourse.processing.org/t/want-to-replace-text-with-new-element-instead-of-adding-a-new-element/1458 "2018-07-03T10:47:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![LWoodall](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@LWoodall](https://discourse.processing.org/u/LWoodall)\
**Post date:** [July 3, 2018, 10:47am UTC](https://discourse.processing.org/t/want-to-replace-text-with-new-element-instead-of-adding-a-new-element/1458/1 "2018-07-03T10:47:04Z")

</div>

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](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

```auto
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))]);
}

```

---

<div class="post-metadata">

**Author:** ![behreajj](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@behreajj](https://discourse.processing.org/u/behreajj)\
**Post date:** [July 3, 2018, 11:12am UTC](https://discourse.processing.org/t/want-to-replace-text-with-new-element-instead-of-adding-a-new-element/1458/2 "2018-07-03T11:12:16Z")

</div>

Would [Node.textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) or [Element.innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/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](https://p5js.org/reference/#/p5.Element/elt) created by `createElement`.

---

<div class="post-metadata">

**Author:** ![LWoodall](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@LWoodall](https://discourse.processing.org/u/LWoodall)\
**Post date:** [July 3, 2018, 12:16pm UTC](https://discourse.processing.org/t/want-to-replace-text-with-new-element-instead-of-adding-a-new-element/1458/3 "2018-07-03T12:16:16Z")

</div>

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

```auto
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))]);
}

```