Javascript Progress Bar Onclick Loop

なぜボタン2がクリックごとに5を追加していないのか分かりません。代わりに10を掛けています（3回クリックすると0555になります）。ボタン1はプログレスバーに£1を追加しています。これはカウント++のおかげで、ボタン+ 2のトリックは "+ = 5"と思っていました。Javascript Progress Bar Onclick Loop

私は何が間違っているのか分かりません。誰かが私を解決に向けることができますか？

<body> 
<div id="content" class="col-md-4"> 
    <h1>Donation<span class="label label-default" id="count">0</span></h1> 
    <div class="progress"> 
     <div id="percent" class="progress-bar" role="progressbar" style="width: 0"></div> 
    </div> 
    <button id="button1" class="btn">£1</button> 
    <button id="button2" class="btn">£5</button> 
</div> 
</body>

$(document).ready(function(){ 
    $("#button1").click(addVisit); 
    $("#button2").click(addVisitFive); 
}); 

function addVisit(){ 
    var countTag = $('#count'); 
    var count = countTag.text(); 
    var progressTag = $('#percent'); 
    count ++; 
    countTag.text(count); 
    progressTag.css('width', count * 10 + "%"); 
} 

function addVisitFive(){ 
    var countTag = $('#count'); 
    var count = countTag.text(); 
    var progressTag = $('#percent'); 
    count +=5; 
    countTag.text(count); 
    progressTag.css('width', count * 10 + "%"); 
}

出典

2016-08-15 Alessandrod

Allesandrodこんにちは、スタックオーバーフローへようこそ。あなたの質問のコードに少し書式を追加して読みやすくしました。読者がそれを理解して答えを見つけるのに役立ちます。 –

countTag.text();は、文字列値を返しているとcountは強制を入力しcount++おかげでインクリメントいるように見えます。 count += 5しかし、文字列を強制的に使用しようとするのではなく、文字列を使用したときにデフォルトの動作が得られ、+演算子が連結であるため、3回クリックした後に0555となります。

試してみてください。+(countTag.text())それは数ではない場合はベース10内の文字列を数値に変換します単項+演算子を使用するには、あなたは間違いなくparseInt(countTag.text())を使用しようとするよりも有利な行動である代わりにNaNを取得します。

出典

2016-08-15 21:17:14 stevenelberger

私はあなたのヒントを試しましたが、残念ながらまだ動作していませんでした – Alessandrod

それは私の作品に見えます：https://fiddle.jshell.net/60apern8/ – stevenelberger

Javascript Progress Bar Onclick Loop

答えて

関連する問題