Передача параметра в метод p5.Element - PullRequest
Новая
       8

Передача параметра в метод p5.Element

1 голос
/ 06 апреля 2020

Я экспериментировал с 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');
  }

}

1 Ответ

1 голос
/ 07 апреля 2020

То, чего вы хотите достичь, возможно. Вы должны добавить дополнительную функцию. Позвольте мне объяснить.

Метод 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');
});
...