多个进度条可视地只更新一个进度条

Multiple progress bars visualy update only one

本文关键字：一个 可视 更新      更新时间：2023-09-26

我正在学习我的JavaScript技能，这是我在这里的第一次程序试用。一切对我来说都很顺利，但我已经被这个问题困扰了大约3天，我想我有一些事情没有解决。

好吧，潜水-我有两个单独的"训练场"-每个都有自己的"训练"按钮（点击功能），"升级"按钮（单击功能）和进度条。问题是"训练场"越高，进度条就越低，而不是它自己。

我们将不胜感激！thx

//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 = "";
    }
};
/*=============================================*/
<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>

您正在使用完全相同的名称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元素。

相关文章：