Javascript 在p5中将许多元素添加到一起

我想同时制作一个文本框和一个下拉列表。当我运行代码时，它只执行一个（文本框或下拉列表）

这是我的密码：

let button;
let sel;
let sel2;
var text;
var x = 10;
var y = 230;
var img;

function setup() {
createCanvas(windowWidth, 600);
background(0);

img = loadImage("audi.jpg");

  sel = createSelect();
  sel.position(20, 150);
  sel.option('FERARI');
  sel.option('MERCEDES');
  sel.option('TOYOTA');
  sel.option('AUDI');
  sel.option('BMW');

  sel2 = createSelect();
  sel2.position(300, 150);
  sel2.option('FERARI');
  sel2.option('MERCEDES');
  sel2.option('TOYOTA');
  sel2.option('AUDI');
  sel2.option('BMW');

  button = createButton('COMPARE');
  button.position(550, 150);
  button.mousePressed(display);

  text = createInput();
  text.pos(300, 300);
}

function display() {
  textSize(16);
  fill(255, 215, 0);
  let index = sel.value();
  text(index, 20, 430);

  let number = sel2.value();
  text(number, 300, 430);

  if(sel.value() === 'BMW') {
    text('MILEAGE: 14-20 km/l', 20, 460);

    text('COST: 41.7-48.5 LAKH', 20, 490);

  text('FUEL TYPE: PREMIUM FUEL', 20, 520);
  }

if(sel.value() === 'AUDI') {

  text('MILEAGE:  9 km/l', 20, 460);

  text('COST: 1.345 CORE', 20, 490);

  text('FUEL TYPE: PETROL', 20, 520);
  }

  if(sel.value() === 'FERARI') {
    text('MILEAGE: 9 km/l', 20, 460);

    text('COST: 3.5 CORE', 20, 490);

  text('FUEL TYPE: PETROL', 20, 520);
  }

  if(sel.value() === 'MERCEDES BENZ C CLASS') {
    text('MILEAGE: 10-19 km/l', 20, 460);

    text('COST: 40.9 LAKHS', 20, 490);

  text('FUEL TYPE: UNLEADED FUEL', 20, 520);
  }

  if(sel.value() === 'TOYOTA') {
    text('MILEAGE: 7-10 km/l', 20, 460);

    text('COST: 28.66-36.88 LAKH', 20, 490);

  text('FUEL TYPE: MID GRADE GASOLINE', 20, 520);
  }

  if(sel2.value() === 'AUDI') {
  text('MILEAGE:  9 km/l', 300, 460);

  text('COST: 1.345 CORE', 300, 490);

  text('FUEL TYPE: PETROL', 300, 520);
  }

  if(sel2.value() === 'BMW') {
  text('MILEAGE: 14-20 km/l', 300, 460);

  text('COST: 41.7-48.5 LAKH', 300, 490);

  text('FUEL TYPE: PREMIUM FUEL', 300, 520);
  }

  if(sel2.value() === 'TOYOTA') {
  text('MILEAGE: 7-10 km/l', 300, 460);

  text('COST: 28.66-36.88 LAKH', 300, 490);

  text('FUEL TYPE: MID GRADE GASOLINE', 300, 520);
  }

  if(sel2.value() === 'FERARI') {
  text('MILEAGE: 9 km/l', 300, 460);

  text('COST: 3.5 CORE', 300, 490);

  text('FUEL TYPE: PETROL', 300, 520);
  }

  if(sel2.value() === 'MERCEDES BENZ C CLASS') {
  text('MILEAGE: 10-19 km/l', 300, 460);

  text('COST: 40.9 LAKHS', 300, 490);

  text('FUEL TYPE: UNLEADED FUEL', 300, 520);
  }
}

（不要嘲笑这个设计。） 当我进行一些排列时，有时会出现文本框，当我单击比较按钮时，什么也不会发生

---

请提前提供帮助和thnx。

您的代码中有两个问题

您有一个名为

var text

的变量。因为p5.js已经在为函数使用该名称，所以必须将其重命名为类似于

var textBox

。（也不要忘记更改

设置（）中的行）

textBox.pos（）

不是有效的函数。将其更改为

textBox.position（）