Fonctionne dans un onclick mais pas ailleurs

ToinouPHP
Javascript

Bonjour, j'essaye de faire un clicker game pour m'entrainer et l'option d'upgrade ne fonctionne que quand je le met dans la function onclick sur la zone de clic.

Je m'explique :

$("#upgrade1").click(function(){
    cbPerClick = cbPerClick + 1;
    monnaie = monnaie - coutUpgrade;
    coutUpgrade = coutUpgrade * 5;
    showMonnaie();
    showCps();
    $("#upgrades").html();
});

Quand je le met dans le script, normalement, dans aucune fonction ni rien, ça ne fonctionne pas, ça n'upgrade pas le cout par clic

La seule façon que j'ai trouvé qui fonctionne, c'est de le mettre dans le onclick de la zone de clic :

$("#clickHere").click(function(){
    monnaie = monnaie + valueOfADollar;
    showMonnaie();
    showCps();
    showDollar();

if (monnaie >= coutUpgrade) {
    $("#upgrades").html('<a href="#" id="upgrade1" class="btn btn-hg btn-primary">+1€ / clic</a>');
}
else
{
    $("#upgrades").html('');
}

$("#upgrade1").click(function(){
    cbPerClick = cbPerClick + 1;
    monnaie = monnaie - coutUpgrade;
    coutUpgrade = coutUpgrade * 5;
    showMonnaie();
    showCps();
    $("#upgrades").html();
    console.log(coutUpgrade)
});

}); // fin clickhere click

Genre... POURQUOI ?

J'ai beau me creuser la tête, et c'est genre totalement illogique que ça fonctionne ici et pas normalement, donc j'aimerais bien des explications.

6 réponses

popotte

Hello !

Alors dans ta première function, tu utilises html() en tant que getter, alors que dans le deuxieme tu fait un setter puis un getter (getter inutile)

Dans la doc jQuery ils font comme ça:

$( "p" ).click(function() {
  var htmlString = $( this ).html();
  $( this ).text( htmlString );
});

Tu peux essayer ça ^^

ou tout simplement html en tant que setter:

$("#upgrade1").click(function(){
    cbPerClick = cbPerClick + 1;
    monnaie = monnaie - coutUpgrade;
    coutUpgrade = coutUpgrade * 5;
    showMonnaie();
    showCps();

    monnaie >= 0
        ? $("#upgrades").html('<a href="#" id="upgrade1" class="btn btn-hg btn-primary">+1€ / clic</a>');
        : $("#upgrades").html('');
});
ToinouPHP
Auteur

Nope, fonctionne pas,
En fait, ça ne détecte pas le clic, même si je met juste un 

$("#upgrade1").click(function(){
    alert('lol');
});

rien ne se passe

popotte

ah oui bizarre :/ tu peux faire voir ton html??

ToinouPHP
Auteur

Rien de spécial, je pense, dans le HTML

<div class="container" align="center">

<h1><span id="monnaie"></span>€</h1>
<small><div id="cps"></div></small>

<div id="clickHere"></div>
<div id="upgrades"></div>

</div> <!-- container -->
MickaelTD

Salut, ton element html est detecté au moins ?
Juste pour le test si , tu fais ceci

// HTML
<div id="upgrades">
    <a href="#" id="upgrade1" class="btn btn-hg btn-primary">+1€ / clic</a>
</div>

// CSS
#upgrade1 {
    opacity: 0,
    visibily: hidden
}

// JS
...
if (monnaie >= coutUpgrade) {
    $("#upgrade1").css('opacity', "1", "visibily", "visible");
}
else
{
    $("#upgrades").css('opacity', "0", "visibily", "hidden")
}

// En dehors du click here
$("#upgrade1").click(function(){
    alert('lol');
});

Est-ce que la ça fonctionne ou t'a le même résultat ?

popotte

ah c'est un lien? tou s'explique :p

alors essayes ça:

$("#upgrade1").click(function(event){
    event.preventDefault() // pour bloquer l'action du lien
    alert('lol');
})

Ou alors essayes remplacer le lien a par un texte ou un boutton ^^