modificato con solo codice javascript
codice HTML:
<!--
Vorrei che nel tag <selection> all'inizio sia visibile solo <option>LIVELLO1</option>
dopo aver fatto il click sul pulsante <input>AVVIA deve partire il countdown se la condizione viene soddisfatta
e allo stesso tempo dare il valore TRUE a <option>LIVELLO1</option>
(nel senso che questa cosa e stata fatta e non deve essere più visibile e ripetuta)
a questo punto deve scomparire il tag <option>LIVELLO1</option>
e visualizzarsi <option>LIVELLO2</option> se viene soddisfatta la condizione si sblocca il pulsante
e si avvia di nuovo il countdown alla pressione e cosi via per altri tag che ora non ci sono tipo LIVELLO3, LIVELLO4 ECC ECC....
-->
<!DOCTYPE html>
<html>
<head>
<title>Conto alla rovescia</title>
<meta charset="utf-8">
<script>
function updateTimer(divId,seconds)
{
document.getElementById('avvia').disabled=true;
elem = document.getElementById(divId);
elem.style.display = 'none';
sec = seconds;
if(seconds < 10) {
sec = "0" + seconds;
}
document.getElementById('seconds').innerHTML = "00:00:" + sec;
if (seconds == 0) {
document.getElementById('avvia').disabled=false;
elem.style.display = 'block';
} else {
var count = seconds - 1;
setTimeout("updateTimer('" + divId + "'," + count + ")", 1000);
}
}
// setta conteggio iniziale
function setTime(time) {
document.getElementById('seconds').innerHTML = "00:00:" + parseInt(time);
}
// recupero valore select
function getSelected(select) {
return select.options[select.selectedIndex].value;
}
// recupera l'elemento
function getId(el) {
return document.getElementById(el);
}
</script>
</head>
<body>
<div>
<script>
// Livello1 e di Default FALSE, deve diventare TRUE solo dopo che il processo del primo TAG option va a termine
// e quindi successivamente sbloccare il secondo TAG option
var livello1 = false;
var cassa = 1000;
var opt1 = 100;
var opt2 = 500;
</script>
<select name="secondi" id="secondi" onchange="setTime(getSelected(this))">
<script>
if(cassa >= opt1){
cassa = cassa - opt1;
document.write('<option value="2">Livello 1</option>');
livello1 = true;
}
else
document.write('non ci sono soldi in cassa');
// Livello 1 dopo aver portato a termine il processo deve disabilitarsi e non dovrebbè più essere avviato
// Livello 2 deve essere visibile solo se Livello 1 e stato già avviato e portato a termine
if(cassa >= opt2 && livello1 == true){
var cassa = cassa - opt2;
document.write('<option value="4">Livello 2</option>');
}
else
document.write('non ci sono soldi in cassa');
</script>
</select>
<input type="button" id="avvia" onclick="updateTimer('foo',getSelected(getId('secondi')));" value="AVVIA" />
<h1 id="seconds"></h1>
<div id="foo" style="display: none;">
<h1>Conto alla rovescia terminato! Livello successivo sbloccato</h1>
<h2>Soldi rimanenti in cassa: <script>document.write(cassa)</script></h2>
</div>
</div>
</body>
</html>