- Linia 173 jest niepotrzebna, wywołanie funkcji sprawdz() powinno nastąpić tylko po wybraniu litery (onclick="sprawdz()").
- "wyciągnij" funkcję sprawdz() i wypisz_haslo() z funkcji gra()
- ustaw zmienne haslo i haslo1 jako globalne
- w funkcji sprawdz() zamień zmienną dlugosc na haslo.length
let haslo, haslo1;
function gra() {
...
}
function wypisz_haslo() {
...
}
function sprawdz(nr) {
var trafiona = false;
var element="lit"+nr;
for (i=0; i<haslo.length; i++) {
...
}
...
}
P.S. Jak chcesz np. "wyłączyć" przycisk, możesz tez użyć atrybut disabled
document.getElementById("przycisk").disabled = true; // Wyłącz
document.getElementById("przycisk").disabled = false; // Włącz
Ten zapis
var hasla = new Array(5);
switch (kategoria) {
case "gry":
hasla[0] = "Wiedźmin";
hasla[1] = "Gothic";
hasla[2] = "Assasins Creed";
hasla[3] = "Minecraft";
hasla[4] = "Mortal Combat";
break;
...
}
"sprytny", ale mało praktyczny, raczej nie stosowany, kłopotliwy gdy chcesz dodać hasła (np. różne ilości haseł w kategoriach).
Spróbuj z Associative array, (możesz w nazwach kategorii używać "polskie ogonki".) np.
const hasla = [
{ kategoria:'Gry', slowa: [
'Wiedźmin', 'Gothic', 'Assasins Creed',
'Minecraft', 'Mortal Combat'
]},
{ kategoria:'Zwierzęta', slowa: [
'Mangusta', 'Lampart', 'Antylopa', 'Wiewiórka',
'Nosorożec', 'Salamandra', 'Niedźwiedź', 'Borsuk'
]},
{ kategoria:'Rośliny', slowa: [
'Kaktus', 'Słonecznik', 'Palma kokosowa', 'Chryzantemy'
]}
]
console.info('Wszystkie kategorie:');
for (let wiersz of hasla)
console.log(wiersz.kategoria);
console.info('Ile kategoti: ' + hasla.length);
for (let wiersz of hasla)
console.log('Haseł w kategori <' + wiersz.kategoria + '>: ' + wiersz.slowa.length);
const losowyIndeksKategoria = Math.round(Math.random() * (hasla.length - 1));
console.info('Wylosowana kategoria: ' + hasla[losowyIndeksKategoria].kategoria);
const losowyIndeksHaslo = Math.round(Math.random() * (hasla[losowyIndeksKategoria].slowa.length - 1));
console.info('Wylosowane hasło z kategorii: ' + hasla[losowyIndeksKategoria].slowa[losowyIndeksHaslo]);
console.log('Druga kategoria, ostatnie hasło: ' + hasla[1].slowa[(hasla[1].slowa.length - 1)]);
console.warn('Wszystkie hasła, kategoria pierwsza');
for (let wiersz of hasla[0].slowa)
console.warn(wiersz);
// lub
for (let i=0; i<hasla[0].slowa.length; i++)
console.error(hasla[0].slowa[i]);
// lub
hasla[0].slowa.forEach((wiersz) => {
console.info(wiersz);
});
console.log('Wszystkie hasła, kategoria druga');
for (let i=0; i<hasla[1].slowa.length; i++)
console.log(hasla[1].slowa[i]);
można w tym przypadku
if(trafiona==true) {
yes.play();
document.getElementById(element).style.background="#003300";
document.getElementById(element).style.color="#00C000";
document.getElementById(element).style.border="3px solid #00C000";
document.getElementById(element).style.cursor="default";
wypisz_haslo();
}
else{
no.play();
document.getElementById(element).style.background="#330000";
document.getElementById(element).style.color="#C00000";
document.getElementById(element).style.border="3px solid #C00000";
document.getElementById(element).style.cursor="default";
document.getElementById(element).setAttribute("onclick",";");
...
}
posłużyć się element.classList, np
.yes {
background-color: #003300;
color: #00C000;
border: 3px solid #00C000;
cursor:default;
}
.no {
background-color: #330000;
color: #C00000;
border: 3px solid #C00000;
cursor: default;
}
if(trafiona==true) {
yes.play();
document.getElementById(element).classList.remove('no');
document.getElementById(element).classList.add('yes');
wypisz_haslo();
}
else{
no.play();
document.getElementById(element).classList.remove('yes');
document.getElementById(element).classList.add('no');
document.getElementById(element).removeAttribute('onclick');
...
}
podobnie jak z atrybutem disabled,
var obraz="img/s"+ile_pomylek+".jpg";
document.getElementById("szubienica").innerHTML='<img src="'+obraz+'" />';
możesz odwołać się bezpośrednio do atrybutu src elementu <img> np.
<div id="szubienica">
<img src="" />
</div>
const szubienica_img = document.querySelector('#szubienica img');
szubienica_img.src = 'img/s'+ile_pomylek+'.jpg';
lub
<div class="szubienica">
<img id="szubienica" src="" />
</div>
const szubienica_img = document.getElementById('szubienica');
szubienica_img.src = 'img/s'+ile_pomylek+'.jpg';