在p5.Element方法中传递参数

Question

我正在尝试使用p5和DOM。我创建了一个简单的示例，其中包含一些滑块和按钮，用于在浏览器中打印文本。

为什么在使用mousePressed（）方法时不能传递参数？我的意思是，当我尝试执行sButton.mousePressed('Swordsman');

时，给我一个错误

以下是我的代码。抱歉，如果是一团糟，我刚刚开始尝试进行此操作。

let sSlider, aSlider, cSlider;
let sInput, aInput, cInput;
let sButton, aButton, cButton;
let parS, parA, parC;
let totalS, totalA, totalC;
totalS = totalA = totalC = 0;

function setup() {
  createElement('h1', 'Recruit Troops');

  createElement('b', 'Swordsman: ');
  sInput = createInput('');
  sSlider = createSlider(0, 999, 0);
  sButton = createButton('recruit');
  parS = createP('');
  parS.hide();

  sButton.mousePressed(recruting('Swordsman'));
  createElement('br');

  createElement('b', 'Archer');
  aInput = createInput('');
  aSlider = createSlider(0, 999, 0);
  aButton = createButton('recruit');
  parA = createP('');
  parA.hide();

  aButton.mousePressed(recruting('Archer'));
  createElement('br');

  createElement('b', 'Cavalry');
  cInput = createInput('');
  cSlider = createSlider(0, 999, 0);
  cButton = createButton('recruit');
  parC = createP('');
  parC.hide();

  cButton.mousePressed(recruting('Cavalry'));
  createElement('br');
}



function draw() {
  createCanvas(400, 400);
  background(255);
  updateValues();
}


function updateValues() {
  sInput.value(sSlider.value());
  aInput.value(aSlider.value());
  cInput.value(cSlider.value());
}

function recruting(troop) {
  if (troop == 'Swordsman') {
    totalS += sSlider.value()
    parS.html(+totalS + '' + troop + ' recruting');
  } else if (troop == 'Archer') {
    totalA += aSlider.value();
    parA.html(+totalA + '' + troop + ' recruting');
  } else if (troop == 'Cavalry') {
    totalC += cSlider.value();
    parC.html(+totalC + '' + troop + ' recruting');
  }

}

Answer 1

您想要实现的目标是可能的。您必须添加一个额外的功能。让我解释一下。

mousePressed（）方法将一个函数作为参数。您可以将其称为“回调函数”。当您按下dom元素时，它将调用您传递到其中的函数。

let c = createButton('test');
c.mousePressed( doSomething );

function doSomething( msg ){
    console.log(msg); //expected output: undefined

}

注意我如何在不带（）的情况下传递'doSomething'。 （）表示您正在执行（调用）该函数。您只想传递对整个函数的引用。

**如果我确实添加了（），则该函数将直接执行，并且该函数返回的任何内容（在这种情况下未定义）都将作为回调函数传递。

当您向mousePressed参数添加一个额外的函数时，可以从该函数中调用doSomething。

let c = createButton('test');
c.mousePressed( function(){
    doSomething('Hello Vasco!');
});

function doSomething( msg ){
    console.log(msg); //expected output: Hello Vasco!

}

或者，将其应用于您的代码应如下所示：

cButton.mousePressed( function(){
    recruting('Cavalry');
});