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