在 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() 方法将函数作为参数。你可以称它为 'callback function'。当您按下 dom 元素时，它会调用您传递给那里的函数。

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

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

}

请注意我是如何在没有 () 的情况下通过 'doSomething' 的。 () 表示您正在执行（调用）该函数。您只想传递对整个函数的引用。

** 如果我确实添加了 ()，该函数将直接执行，并且任何函数 returns（在本例中未定义）都将作为回调函数传入。

当您向 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');
});

在 p5.Element 方法中传递参数

Passing a parameter in p5.Element method

javascript

parameters

methods

dom

p5.js