Utilisation de la fonction en javascript pour obtenir une valeur en temps réel

Je pense donc que votre question doit aborder plusieurs points. Concentrons-nous d'abord sur ce que vous voulez faire avec votre code existant: vous voulez qu'un élément soit Your score is Xmis à jour avec le nouveau score à chaque fois que vous cliquez sur le bouton. Pour ce faire, vous devrez modifier votre code javascript de cette façon:

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

Nous avons fait quelques choses ici: au lieu d'utiliser createDiv()chaque fois que la partition est mise à jour (ce qui crée les nouveaux éléments affichant la partition), nous ne l'utilisons qu'une seule fois setup()et nous conservons son contenu scoreDiv.

scoreDiva maintenant le type P5.Element , à partir du doc, vous pouvez voir qu'il a une fonction html()qui prend une chaîne et l'utiliser pour changer le contenu du div. Donc, l'appeler dans la fonction que vous appelez lorsque vous cliquez sur le bouton mettra à jour le texte et vous donnera le résultat souhaité.

Je veux encore aborder le titre de votre question qui concerne une "fonction temps réel". Puisque vous utilisez p5.js vous voudrez probablement vous familiariser avec la draw()fonction: c'est une fonction que vous définissez dans votre sketch.jsfichier (qui est le fichier où vous avez déjà écrit votre code javascript) et elle est ensuite exécutée à chaque fois que l'écran est rafraîchi.

Ce sera la fonction dans laquelle vous ferez bouger vos formes et vos dessins et vous pourrez également y mettre à jour votre interface.

Donc, une chose que vous pouvez faire, qui n'est pas une bonne solution mais qui reste utile pour illustrer ce que je dis, est de déplacer la scoreDiv.html('Your score is ' + upScore);ligne vers une nouvelle draw()fonction et de cette façon vous n'avez pas à vous soucier de rafraîchir votre interface dans les fonctions que vous appelez en cliquant sur un bouton car il sera rafraîchi à chaque image:

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

voici un exemple fonctionnel de votre code

Ce n'est clairement pas la solution la plus efficace mais c'est un bon moyen de vous aider à comprendre comment draw()fonctionne. Lorsque vous serez plus familier avec JS et HTML, vous utiliserez probablement des frameworks plus complexes pour gérer ce genre de choses.