Help with Input Text Boxes and Arrays

p5.js Coding Questions
1

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.

2

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

    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

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.

3 Likes
3

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.