[Résolu] Besoin d'aide. Créer une variable depuis ce script java possi

Bonjour,

Voilà, après pas mal de recherche et d'essai. Je suis bloqué.
Mais connaissance en code sont très faible. Un peu le php et html mais c'était il y a 10 ans, depuis j'ai pas mal oublié.

J'essaye de modifier un script qui créer une barre de don ou objectif.
Voici un exemple d'une barre qui fonctionne : https://streamlabs.com/widgets/follower-goal?token=A13E6E3CA94AE5E3AD78

Cette barre es crée depuis le site streamlabs mais il manque une option, la taille du texte.
J'ai donc créer/modifié un script mais je bloque.
Le site propose de créer la barre via du html css et js.
Le script js de base es le suivant :

        document.addEventListener('goalLoad', function(obj) {
        // obj.detail will contain information about the current goal
        // this will fire only once when the widget loads
        console.log(obj.detail);
        $('#title').html(obj.detail.title);
        $('#goal-current').text(obj.detail.amount.current);
        $('#goal-total').text(obj.detail.amount.target);
        $('#goal-end-date').text(obj.detail.to_go.ends_at);
        });
        document.addEventListener('goalEvent', function(obj) {
        // obj.detail will contain information about the goal
        console.log(obj.detail);
        $('#goal-current').text(obj.detail.amount.current);
        });

Ensuite le css (je l'ai modifier pour y ajouter les styles couleur et autres):

          
/* All html objects will be wrapped in the #wrap div */
element.style {
    height: 96px;
    background: rgb(221, 221, 221);
}

.condensed__container {
    width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 1px #222;
}
.condensed__current__amount, .condensed__amount, .condensed__title {
color: #B00000;
font-style: normal;
font-variant: normal;
font-weight: 800;
font-stretch: normal;
font-size: 45px;
line-height: 96px;
font-family: "Open Sans";
}
user agent stylesheet
div {
    display: block;
}

et pour finir le html :

<div id="sl__donation__goal">
	<div>
		<div style="padding: 10px 10px;">
			<div class="condensed__container" style="height: 96px; background: rgb(221, 221, 221);">
			<div class="condensed__current__amount">
				<span id='goal-current'></span>
              <div class="condensed__title">
				<div id='title'></div>
			</div>
	<div class="condensed__amount">
		<span id='goal-total'></span>	
	</div>
			
		<div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; box-shadow: rgb(0, 0, 0) 0px 0px 2px inset;"></div>
		<div class="donation-bar condensed__bar" style="background: linear-gradient(transparent, rgba(0, 0, 0, 0.15)) rgb(70, 230, 90);"></div>
              </div>
		</div>
	</div>
</div>

Le problème avec ceci es que la barre verte n'apparaît pas (seul les texte et le fond gris sont bon)
Je n'arrive a définir le "width" dans la class "donation-bar condensed__bar".
Et en plus le width doit être calculé car c'est un pourcentage. (je joint ce que çà donne)
https://i62.servimg.com/u/f62/15/44/46/49/exempl13.png

Cordialement
Jérôme
Modifié par Jerome87 (14 Mar 2018 - 21:34)

Bonjour

dans cet exemple :

var score = 0;
function bonneRep(score)
{
score = score + 1;
}


tu as en fait deux variables score : une globale (ligne), et des locales (lignes 2 et 4).


Si tu veux utiliser la variable globale, il suffit de créer une fonction, mais sans argument, comme ceci :

var score = 0;
function bonneRep()
{
score = score + 1;
}


qui augmentera la variable globale de 1 quand on l'appellera.
https://www.elephorm.com/apprendre-javascript/distinguer-les-variables-globales-les-variables-locales

Ah ok çà j'avait du mal a faire la différence, merci pour l'info. Je suis totalement débutant en java.
Par contre avec ceci :

$('#goal-current').text(obj.detail.amount.current);
$('#goal-total').text(obj.detail.amount.target);

Comment je peu l'utiliser ?
Le but es de prendre le résultat de ces 2 lignes.
exemple : goal-current = 21 et goal-total = 56
Après je doit faire un calcul pour obtenir un pourcentage. (21/56)x100 = 37.5 %
Et au final ce 37.5 % sera la valeur dans un style css pour un "width".

Cordialement
Jérôme