# Help with Input Text Boxes and Arrays

**URL:** <https://discourse.processing.org/t/help-with-input-text-boxes-and-arrays/37456>\
**Category:** Coding Questions\
**Created:** [June 10, 2022, 3:51pm UTC](https://discourse.processing.org/t/help-with-input-text-boxes-and-arrays/37456 "2022-06-10T15:51:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [June 10, 2022, 3:51pm UTC](https://discourse.processing.org/t/help-with-input-text-boxes-and-arrays/37456/1 "2022-06-10T15:51:28Z")

</div>

Hi guys, please I need your help. I developed this app but it is not working as intended. If a set of values are imputed and one calculation is performed, a result is gotten, but if I edit the values in the text box and do another calculation the new result is superimposed on the one prior and the results gets messy. I need help with that problem.

I also want a scenario where the values in the input text boxes will persist if I click the “Insert Text Boxes Button”, if say an initial calculation is performed using two rows and a result is obtained, and I want to do another calculation with 5 rows by inserting three more rows. When the “Insert Text Boxes Button” is clicked after a calculation, all the values in the text boxes disappear, I want that to be solved.

You can use a better approach if you can, I am thinking Object-Oriented Programming will be the best approach where we’ll utilise the push function to increase the size of the array.

I will also like to add a delete button that will reduce the number of text boxes after each click.

This is the link to the code, thanks for your help.

> **[p5.js Web Editor](https://editor.p5js.org/Chigoz/sketches/R7hDhM5O9)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [June 12, 2022, 12:40pm UTC](https://discourse.processing.org/t/help-with-input-text-boxes-and-arrays/37456/2 "2022-06-12T12:40:58Z")

</div>

you can keep the old values by simply checking if input is empty

```auto
    if (i % 2 == 1 && !input[i]) {
      input[i] = createInput();
      input[i].style("font-size", "15px");
      input[i].position(425, (135 + 30 * i) / 2 - 15);
      input[i].size(50);
    }

    if (i % 2 == 0 && !input[i]) {
      input[i] = createInput();
      input[i].style("font-size", "15px");
      input[i].position(328, (135 + 30 * i) / 2);
      input[i].size(50);

      fill(0);
      textStyle(BOLD);
      textSize(18);
      strokeWeight(10);
      text(index / 2, 290, (113 + 30 * index) / 2);
    }

```

for “superimposed” problem you never clear the screen but you have already built  
an element for the preceeding text so just use that

so with the changes it looks something like this

```auto
var button, drawButton1;
var index = 0;
var input = [];
var area = [];
var total;

function setup() {
  createCanvas(1348, 3000);
  background(220);

  push();
  let col = color(25, 23, 200, 50);
  let col1 = color(0, 0, 0);
  drawButton1 = createButton("Click to Insert Text Boxes");
  drawButton1.style(BOLD);
  drawButton1.style("font-size", "20px");
  drawButton1.position(530, 150);
  drawButton1.size(170, 80);
  drawButton1.style("background-color", col);
  drawButton1.style("color", col1);
  drawButton1.mousePressed(insertBoxes);

  pop();

  button = createButton("Calculate Total Area");
  button.position(530, 320);
  button.style("font-size", "20px");
  button.size(170, 80);
  button.style("background-color", col);

  button.mousePressed(findarea);
  //##############################################
  greeting = createElement("h2", "Length");
  greeting.position(310, 20);
  greeting = createElement("h2", "Width");
  greeting.position(415, 20);
  drawButton1.mousePressed(insertBoxes);
  //####################################################
  greeting = createElement("h2", "Start");
  greeting.position(710, 155);
  greeting = createElement("h2", "Finish");
  greeting.position(710, 325);
  greeting = createElement("h2", "");
  greeting.position(520, 220);
  greeting.style('white-space', 'nowrap');
}

function insertBoxes() {
  index = index + 2;
  for (let i = 0; i < index; i += 1) {
    if (i % 2 == 1 && !input[i]) {
      input[i] = createInput();
      input[i].style("font-size", "15px");
      input[i].position(425, (135 + 30 * i) / 2 - 15);
      input[i].size(50);
    }

    if (i % 2 == 0 && !input[i]) {
      input[i] = createInput();
      input[i].style("font-size", "15px");
      input[i].position(328, (135 + 30 * i) / 2);
      input[i].size(50);

      fill(0);
      textStyle(BOLD);
      textSize(18);
      strokeWeight(10);
      text(index / 2, 290, (113 + 30 * index) / 2);
    }
  }
}
function draw() {}

function findarea() {
  fill(0, 0, 255);
  //noFill();
  textStyle(BOLD);
  textSize(24);
  strokeWeight(100);

  total = 0;
  for (let i = 0; i < index; i += 1) {
    if (i % 2 == 0) {
      area[i] = input[i].value() * input[i + 1].value();
      total = total + area[i];

      print(area[i]);
      print(total);
      greeting.html("The Total Area Is: " + total);
    }
  }
  //text(total, 713, 262);
}

```

ps. hardcoded values should be avoided. best of luck.

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [June 12, 2022, 1:33pm UTC](https://discourse.processing.org/t/help-with-input-text-boxes-and-arrays/37456/3 "2022-06-12T13:33:11Z")

</div>

Wow, I can’t thank you enough for your help, your solution is a life saver and straight to the point. I truly appreciate your efforts for taking time out to fix these problems. God bless you.