Question

我正在研究我的JavaScript技能，这是我在这里的第一个程序试用版。对我来说一切都很顺利，但我现在已经坚持了这个问题大约3天了，我想我还有一些东西不能解决这个问题。

好吧，潜水 - 我有2个独立的＆＃34;培训领域＆＃34; - 每个人都有自己的＃34;火车＆＃34;按钮（onclick功能），＆＃34;升级＆＃34;按钮（onclick功能）和进度条。问题是更高的培训领域＆＃34;将进展较低的进度条而不是它自己的进度条。

帮助将不胜感激！ THX

＆＃13;

//ignore this line, it's for me for testing
document.getElementById('hideMe').style.visibility = 'hidden';

/*========================================
 Javascript for first set
========================================*/
var bodyTotal = 0;
var totalBodyCost = 0;
var bodyCost = 100;
var amountLoaded = 1;
function buyBody(){
    bodyCost = totalBodyCost + Math.floor(100 * Math.pow(1.1,bodyTotal));
    if(amountLoaded >= bodyCost){
        totalBodyCost += bodyCost;
        bodyTotal = bodyTotal + 1;
        document.getElementById('bodyTotal').innerHTML = bodyTotal;
        var finalMessage = document.getElementById('bodyFinalMessage').style.visibility = 'hidden';
        amountLoaded = 0;
    };
    var nextCost = totalBodyCost + Math.floor(100 * Math.pow(1.1,bodyTotal));
    document.getElementById('bodyCost').innerHTML = nextCost;
    document.getElementById("bodyProgressBar").max = nextCost;
    bodyCost = nextCost;
    progressBarSim(amountLoaded);
};

function progressBarSim(al) {
  var bar = document.getElementById('bodyProgressBar');
  var status = document.getElementById('bodyStatus');
  status.innerHTML = al+"/" +bodyCost;
  bar.value = al;
  al++;
	var sim = "progressBarSim("+al+")";
	
}

function trainBody(){
    progressBarSim(amountLoaded);
    if(amountLoaded < bodyCost){
    amountLoaded++;
    }else{
        	  var finalMessage = document.getElementById('bodyFinalMessage').style.visibility = 'visible';
	  finalMessage.innerHTML = "";
    }
};
/*=============================================*/


/*========================================
 Javascript for second set
========================================*/
var mindTotal = 0;
var totalMindCost = 0;
var mindCost = 100;
var amountLoaded = 1;
function buyMind(){
    mindCost = totalMindCost + Math.floor(100 * Math.pow(1.1,mindTotal));
    if(amountLoaded >= mindCost){
        totalMindCost += mindCost;
        mindTotal = mindTotal + 1;
        document.getElementById('mindTotal').innerHTML = mindTotal;
        var finalMessage = document.getElementById('mindFinalMessage').style.visibility = 'hidden';
        amountLoaded = 0;
    };
    var nextCost = totalMindCost + Math.floor(100 * Math.pow(1.1,mindTotal));
    document.getElementById('mindCost').innerHTML = nextCost;
    document.getElementById("mindProgressBar").max = nextCost;
    mindCost = nextCost;
    progressBarSim(amountLoaded);
};

function progressBarSim(al) {
  var bar = document.getElementById('mindProgressBar');
  var status = document.getElementById('mindStatus');
  status.innerHTML = al+"/" +mindCost;
  bar.value = al;
  al++;
	var sim = "progressBarSim("+al+")";
	
}

function trainMind(){
    progressBarSim(amountLoaded);
    if(amountLoaded < mindCost){
    amountLoaded++;
    }else{
        	  var finalMessage = document.getElementById('mindFinalMessage').style.visibility = 'visible';
	  finalMessage.innerHTML = "";
    }
};

/*=============================================*/

＆＃13;

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="interface.css" />
	</head>
	<body>
		<div style="float:right">
            Body Level: <span id="bodyTotal">0</span>
            <button onclick="trainBody()">Train Body</button><br>
            <progress id="bodyProgressBar" value="0" max="100" style="width:200px; float:left;"></progress>
            <span id="bodyStatus" style="float:left; z-index:555; margin-left:-110px;">0/100</span>
            <button id="bodyFinalMessage" style="float:left; visibility:hidden" onclick="buyBody()">Body Level Up</button>
            <br><br>
            Mind Level: <span id="mindTotal">0</span>
            <button onclick="trainMind()">Train Mind</button><br>
            <progress id="mindProgressBar" value="0" max="100" style="width:200px; float:left;"></progress>
            <span id="mindStatus" style="float:left; z-index:555; margin-left:-110px;">0/100</span>
            <button id="mindFinalMessage" style="float:left; visibility:hidden" onclick="buyMind()">Mind Level Up</button>
		
        </div>
        
        
        <div id="hideMe" style="position:absolute; top:400; left:400">
            Body Cost: <span id="bodyCost">100</span><br>
            Mind Cost: <span id="mindCost">100</span>
        </div>
		<script type="text/javascript" src="main.js"></script>
	</body>
</html>

＆＃13;

Answer 1

您使用完全相同的名称amountLoaded，progressBarSim(al)重新分配变量和函数。

由于身体和心灵行为非常相似，您可以使用模块模式（http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html）在自己的范围内使用相同的变量和函数名称。

<button onclick="Body.onClick()">Body</button>
<button onclick="Mind.onClick()">Mind</button>

并在您的脚本文件中

var Body = (function() {
    var me = {};

    me.onClick = function() {
        console.log("body click");
        progressBar(al);
    };

    function progressBar(al) {

    }

    return me;
})();

var Mind = (function() {
    var me = {};

    me.onClick = function() {
        console.log("mind click");
        progressBar(al);
    };

    function progressBar(al) {

    }

    return me;
})();

这里的问题是你不能将body与内联onclick一起使用，因为它已经引用了body元素。

多个进度条可视化仅更新一个

1 个答案: