使用 javascript 中的函数获取实时值

Question

我想在用户单击按钮时获取变量的值。我正在使用 P5.js 编辑器。

let button;
let upScore =0 ,preScore=0;
let run = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];


function setup() {
  createCanvas(200, 200);
  background(128);


  button = createButton('click me');
  button.position(60, 100);
  button.mousePressed(clickAdd);


  function clickAdd() {

    clickScore = random(run);
    createDiv(clickScore);
    upScore = updateScore(clickScore);
    return upScore;

  }

  function updateScore(score) {
    preScore = preScore + score;
    return preScore;
  }

  createDiv('Your score is ' + upScore);

}

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <h3 align="center"> BOOK CRICKET </h3> 
    <script  src="sketch.js"></script>
  </body>
</html>

我只想在每次用户按下按钮时改变总分 'click me'。我不想每次都打印 'score' 语句，我只想在按下按钮时自动更改值。提前致谢

Answer 1

所以我认为您的问题中有几件事需要解决。让我们首先关注您要对现有代码执行的操作：您希望在每次单击按钮时用新分数更新一个显示 Your score is X 的元素。为此，您需要这样更改 javascript 代码：

let button;
let upScore =0 ,preScore=0;
let run = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
// Create a variable to keep in memory where is your text
let scoreDiv;


function setup() {
    createCanvas(200, 200);
    background(128);

    button = createButton('click me');
    button.position(60, 100);
    button.mousePressed(clickAdd);

    // Create a new div which will contain your script
    // and store it in scoreDiv
    scoreDiv = createDiv('Your score is ' + upScore);
}

/*
 * Move clickAdd() and updateScore() out of the setup() function you can declare them separately
 */
function clickAdd() {
    clickScore = random(run);
    // Remove this line: It creates a new div with the score each time you click the button
    // You don't want that
    //createDiv(clickScore);
    upScore = updateScore(clickScore);

    // Instead what you want is to update the content of the div with the new score like this
    scoreDiv.html('Your score is ' + upScore)
    return upScore;
}

function updateScore(score) {
    preScore = preScore + score;
    return preScore;
}

我们在这里做了一些事情：不是每次更新分数时都使用 createDiv()（这会创建显示分数的新元素）我们只在 setup() 中使用它一次并且我们保留它的内容在 scoreDiv.

scoreDiv 现在有 P5.Element type, from the doc you can see that it has a function html()，它接受一个字符串并用它来更改 div 的内容。所以在你点击按钮时调用的函数中调用它会更新文本并给出你想要的结果。

我仍然想解决您关于“实时功能”的问题的标题。由于您正在使用 p5.js，因此您可能希望熟悉 draw() 函数：这是您在 sketch.js 文件中定义的函数（您已经在该文件中编写了 javascript 代码）然后每次刷新屏幕时执行。

这将是您移动形状和绘图的功能，您还可以在那里更新您的界面。

所以你可以做一件事，这不是一个好的解决方案，但仍然有助于说明我在说什么，就是将 scoreDiv.html('Your score is ' + upScore); 行移动到一个新的 draw() 函数和这个这样您就不必担心在单击按钮时调用的函数中刷新界面，因为它会随每一帧刷新：

let button;
let upScore =0 ,preScore=0;
let run = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
let scoreDiv;

function setup() {
  createCanvas(200, 200);
  background(128);

  button = createButton('click me');
  button.position(60, 100);
  button.mousePressed(clickAdd);

  scoreDiv = createDiv('Your score is ' + upScore);
}

function draw() {
  scoreDiv.html('Your score is ' + upScore)
}

function clickAdd() {
  upScore = updateScore(random(run));
}

function updateScore(score) {
  preScore = preScore + score;
  return preScore;
}

here is a working example of you code

这显然不是最有效的解决方案，但它是帮助您了解 draw() 工作原理的好方法。当你更熟悉 JS 和 HTML 你可能会使用一些更复杂的框架来处理这种事情。

使用 javascript 中的函数获取实时值

Using function in javascript to get real time value

html

javascript

p5.js