Mehrere Fortschrittsbalken visualy Update nur eine

Ich arbeite an meinen JavaScript-Fähigkeiten und das ist meine erste Programm-Testversion hier. Es lief alles sehr gut für mich, aber ich stecke jetzt seit ungefähr 3 Tagen an diesem Problem fest und ich denke, da ist etwas, das ich hier nicht verstehe.Mehrere Fortschrittsbalken visualy Update nur eine

Nun, Tauchen - ich habe 2 separate "Training Fields" - jedes hat seine eigene "Train" -Taste (Onclick-Funktion), "Level Up" -Taste (Onclick-Funktion) und Fortschrittsbalken. Das Problem ist, dass das höhere "Trainingsfeld" den unteren Fortschrittsbalken voranbringt und nicht seinen eigenen.

Hilfe wird geschätzt! 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++; 
 
\t var sim = "progressBarSim("+al+")"; 
 
\t 
 
} 
 

 
function trainBody(){ 
 
    progressBarSim(amountLoaded); 
 
    if(amountLoaded < bodyCost){ 
 
    amountLoaded++; 
 
    }else{ 
 
     \t var finalMessage = document.getElementById('bodyFinalMessage').style.visibility = 'visible'; 
 
\t 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++; 
 
\t var sim = "progressBarSim("+al+")"; 
 
\t 
 
} 
 

 
function trainMind(){ 
 
    progressBarSim(amountLoaded); 
 
    if(amountLoaded < mindCost){ 
 
    amountLoaded++; 
 
    }else{ 
 
     \t var finalMessage = document.getElementById('mindFinalMessage').style.visibility = 'visible'; 
 
\t finalMessage.innerHTML = ""; 
 
    } 
 
}; 
 

 
/*=============================================*/

<html> 
 
\t <head> 
 
\t \t <link rel="stylesheet" type="text/css" href="interface.css" /> 
 
\t </head> 
 
\t <body> 
 
\t \t <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> 
 
\t \t 
 
     </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> 
 
\t \t <script type="text/javascript" src="main.js"></script> 
 
\t </body> 
 
</html>

Quelle

2016-05-04 Avry Mintz

Sie haben nur eine Skriptdatei? Dann werden Variablen und Funktionen mit genau den gleichen Namen 'amountLoaded',' progressBarSim (al) 'neu zugewiesen. – Jasen

Ohh .. albern mich! - Ich nahm an, dass die Änderung der ID's genug sein wird. Danke, es hat funktioniert! –

Sie sind Variablen und Funktionen mit den exakt gleichen Namen amountLoaded, progressBarSim(al) Neuzuordnung.

Da das Verhalten von Körper und Geist sehr ähnlich ist, könnten Sie ein Modulmuster (http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html) verwenden, um dieselben Variablen- und Funktionsnamen in ihren eigenen Bereichen zu verwenden.

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

Und in Ihrer Script-Datei

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; 
})();

Die Gotcha hier ist man nicht body mit dem Inline-onclick verwenden können, da diese bereits auf dem Elementkörper bezieht.

Quelle

2016-05-04 18:18:23 Jasen

Mehrere Fortschrittsbalken visualy Update nur eine

Antwort

Verwandte Themen