<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Fund this project!</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.12.1.min.js"></script>
</head>
<body>
<div class="fund">
<div class="fund-remain">
<img src="images/star.png" alt="">
<p id="showResult"><strong>$<span id="showRemain" ></span></strong> still needed for this project</p>
<img src="images/arrow.png" alt="" class="arrow"></div>
<div class="fund-detail">
<div class="progress">
<div id="showProgress"></div>
</div>
<div class="content">
<p><span class="content-highlight">Only 3 days left</span> to fund this project.</p>
<p style="padding:20px 0px;">Join the <strong><span id="showDonor">0</span></strong> other donors who have already supported this project. Every dollar helps.</p>
<div class="clearfix">
<form name="giveForm" onsubmit="return false;">
<input type="text" name="giveNum" id="inputNum" value="50">
<input type="submit" name="" id="submitNum" value="Give Now" >
</form>
</div>
<a id="why">Why give $50? <span id="tooltips">Help 10 Children every month!</span></a>
</div></div>
<div class="fund-btn">
<button class="btn-01">Save for later</button>
<button class="btn-02">Tell your friends</button></div>
</div>
<script>
var numTotal = 500; //-- Project Goal
var numFunded = 0; //-- Funded
var numDonor = 0; //-- no. of donor
var numRemain = 500; //-- Remained
var percentage = 0;
$(function (){
$('#submitNum').click(function(event) {
//show the remain
var sponsor = parseInt($('#inputNum').val());
numFunded += sponsor;
var numRemain = numTotal - numFunded;
$('#showRemain').html(numRemain);
// count the Donor
numDonor ++;
$('#showDonor').html(numDonor);
// goal achieved
if (numTotal == numFunded) {
$("#inputNum").prop( "disabled", true );
$("#submitNum").prop( "disabled", true );
$("#showResult").html("It's done! Thank you!");
}
// progress bar
/* -------------- your code here -----------------*/
var percentage = Math.round(numFunded / numTotal * 10000) / 100.00;
});
// Toot tips
/ -------------- your code here -----------------/
$('#showRemain').html(numRemain);
$('#showProgress').css('width',percentage+"%");
console.log(percentage);
});
</script>
</body>
</html>
如题，每次点击提交按钮numFunded都会跟着变化，现在想计算numFunded占numTotal的百分比，用进度条显示出来。但是计算出来的percentage都是0，想问大家代码错在哪里，怎么改呢？谢谢
看你代码，累的眼疼～
解决方案：把函数里面最后一句话var percentage=......的var去掉就可以啦。
理由：函数内声明变量，导致内部变量覆盖外部变量。