Using function in javascript to get real time value

user_10955806 0
Viewed 92

I want to get the value of a variable as many times as the user clicks a button. I am using the P5.js editor.

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>

All I want is to have the sum in the score to change every time the user presses the button 'click me'. I don't want to print the 'score' statement every time, I just want the value to change automatically when the button is pressed. Thanks in advance

p5.js html javascript
1 Answers

So I think you there are several things to address on in your question. Let's first focus on what you want to do with your existing code: You want to have an element saying Your score is X updated with the new score each time you click the button. To do so you will need to change your javascript code this way:

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;
}

We did a few things here: instead of using createDiv() each time the score is updated (which creates the new elements showing the score) we use it only once in setup() and we keep its content in scoreDiv.

scoreDiv now has P5.Element type, from the doc you can see that it has a function html() which takes a string and use it to change the content of the div. So calling it in the function you call when you click the button will update the text and give your the result you want.

I still want to address the title of your question which is about a "Real time function". Since you are using p5.js you will probably want to get familiar with the draw() function: This is a function you define in your sketch.js file (which is the file where you already wrote your javascript code) and it is then executed each time the screen is refreshed.

This will be the function in which you will make your shapes and drawing move and you can also update your interface there.

So one thing you could do, which is not a good solution but still useful to illustrate what I'm saying, is to move the scoreDiv.html('Your score is ' + upScore); line to a new draw() function and this way you not have to worry about refreshing your interface in the functions you call when clicking a button because it will be refreshed with each frame:

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

This is clearly not the most efficient solution but it's a good way to help you to understand how draw() works. When you're more familiar with JS and HTML you'll probably use some more complex frameworks to handle this kind of things.

user_41942890
Related