• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wywołanie funkcja- gra wisielca

Object Storage Arubacloud
+1 głos
408 wizyt
pytanie zadane 3 lutego 2022 w JavaScript przez Asasader1 Nowicjusz (130 p.)

Witam, 

Mam problem, chciałem ulepszyć grę wisielca i dodac możliwosc wybrania kategorii, stąd też wrzuciłem cały kod do funkcji której przypisałem onclicka ale teraz funkcja sprawdz() nie chce się wywołać i owszem zostaje wylosowane hasło z wybranej kategorii, pózniej zamienione na kreski i wyświetlony alfabet więc funkcja start() działa, ale niestety aplikacja nie reaguje na klikniecie na jakikolwiek div z alfabetu, stąd podejrzewam, że problem jest albo z samą funkcją start(), albo z jej wywołaniem.

function gra(){
    document.getElementById("przycisk").style.display="none";
    var kategoria = document.getElementById("kategoria").value;
    var hasla = new Array(5);
    alert(kategoria);
    switch(kategoria){
        case "gry":
            hasla[0] = "Wiedźmin";
            hasla[1] = "Gothic";
            hasla[2] = "Assasins Creed";
            hasla[3] = "Minecraft";
            hasla[4] = "Mortal Combat";
        break;
        case "zwierzeta":
            hasla[0] = "mangusta";
            hasla[1] = "lampart";
            hasla[2] = "antylopa";
            hasla[3] = "nosorożec";
            hasla[4] = "salamandra";
        break;
        case "rosliny":
            hasla[0] = "kaktus";
            hasla[1] = "słonecznik";
            hasla[2] = "palma";
            hasla[3] = "daktylowiec";
            hasla[4] = "chryzantemy";
        break;
        case "kraje":
            hasla[0] = "Stany zjednoczone";
            hasla[1] = "Tadżykistan";
            hasla[2] = "Uzbekistan";
            hasla[3] = "Korea Południowa";
            hasla[4] = "Demokratyczna Republika Konga";
        break;
        case "miasta":
            hasla[0] = "Honolulu";
            hasla[1] = "Pjongjang";
            hasla[2] = "Luksemburg";
            hasla[3] = "Edinburgh";
            hasla[4] = "Sobienie Kiełczewskie Pierwsze";
        break;
        case "zawody":
            hasla[0] = "anastazjolog";
            hasla[1] = "taksówkarz";
            hasla[2] = "programista";
            hasla[3] = "specjalista od marketingu";
            hasla[4] = "architekt";
        break;
        case "aktorzy":
            hasla[0] = "Jean Claude Van Damme";
            hasla[1] = "Cezary Żak";
            hasla[2] = "Tomasz Karolak";
            hasla[3] = "Arnold Schwarzenegger";
            hasla[4] = "Vin Diesel";
        break;
        case "filmy":
            hasla[0] = "Szybcy i wściekli";
            hasla[1] = "Gladiator";
            hasla[2] = "Jurrasic Park";
            hasla[3] = "Killer";
            hasla[4] = "Wilk z wall street";
        break;
        case "seriale":
            hasla[0] = "Wiedźmin";
            hasla[1] = "Dom z papieru";
            hasla[2] = "M jak miłość";
            hasla[3] = "Rodzinka pl";
            hasla[4] = "Sex Education";
        break;
    }

    var wylosowana_liczba = Math.round(Math.random() * hasla.length);
    wylosowane_haslo = hasla[wylosowana_liczba];

    var haslo = wylosowane_haslo;

    haslo=haslo.toUpperCase();

    var dlugosc=haslo.length;
    var ile_pomylek=0;

    var yes= new Audio("yes.wav");
    var no= new Audio("no.wav");
    var lose = new Audio("lose.wav");
    var win= new Audio("win.wav");

    var haslo1="";

    for(i=0; i<dlugosc; i++){
        if(haslo.charAt(i)==" ") haslo1=haslo1+ " ";
        else haslo1=haslo1 + "-";
    }

    function wypisz_haslo(){
        document.getElementById("plansza").innerHTML=haslo1;
    }

    var litery= new Array(35);

    litery = "AĄBCĆDEĘFGHIJKLŁMNŃOÓPQRSŚTUVWXYZŻŹ";

    function start(){
        var tresc_diva="";

        for(i=0; i<=34; i++){
            var element="lit"+i;
            tresc_diva=tresc_diva + '<div class="litera" onclick="sprawdz('+i+')" id="'+element+'">'+ litery[i]+'</div>';
            if((i+1)%7==0) tresc_diva = tresc_diva + '<div style="clear: both;"></div>';
        }

        document.getElementById("alfabet").innerHTML=tresc_diva;

        wypisz_haslo();
    }

    String.prototype.ustawZnak=function(miejsce,znak){
        if(miejsce>this.length-1) return this.toString();
        else return this.substr(0,miejsce) + znak + this.substr(miejsce+1);
    }

    start();
    

    function sprawdz(nr){

        var trafiona = false;
        var element="lit"+nr;

        for(i=0; i<dlugosc; i++){
            if(haslo.charAt(i)==litery[nr]) {
                haslo1=haslo1.ustawZnak(i,litery[nr]);
                trafiona=true;
            }
        }

        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",";");

            //pomyłka
            ile_pomylek++;
            var obraz="img/s"+ile_pomylek+".jpg";
            document.getElementById("szubienica").innerHTML='<img src="'+obraz+'" />';
        }

        //wygrana
        if(haslo==haslo1){
            document.getElementById("alfabet").innerHTML='<span style="color: #00C000">Tak jest! Podano prawidłowe hasło:</span> '+haslo+'<br><br><span class="reset" onclick="location.reload()">JESZCZE RAZ?</span>';
            win.play();
        }

        //przegrana
        if(ile_pomylek>=9){
            document.getElementById("alfabet").innerHTML='<span style="color: #C00000">Przegrana! Prawidłowe hasło:</span> '+haslo+'<br><br><span class="reset" onclick="location.reload()">JESZCZE RAZ?</span>';
            lose.play();
        }

    }
    
    sprawdz();
}

 

komentarz 3 lutego 2022 przez Asasader1 Nowicjusz (130 p.)
Wywołanie funkcji już działa, niestety prawdopodbnie we wnetrzu funkcji zmieniane jest haslo i dlatego ta funkcja nie spelnia swojego zadania

1 odpowiedź

0 głosów
odpowiedź 3 lutego 2022 przez VBService Ekspert (253,340 p.)
edycja 4 lutego 2022 przez VBService
  • 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 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).  smiley

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';

 

komentarz 6 lutego 2022 przez Asasader1 Nowicjusz (130 p.)
Dzięki za odpowiedzi tak czy siak ciesze sie ktos mi chce pomóc bo ja sobie nie potrafie z tym poradzic
komentarz 8 lutego 2022 przez VBService Ekspert (253,340 p.)
edycja 8 lutego 2022 przez VBService

@Asasader1, pozwoliłem sobie na przerobienie nieco Twojego kodu.  smiley

 

przykład  (html, css tylko dla demonstracji)

<div class="kontener">
  <div id="szubienica">
    <img src="img/s0.jpg" />
  </div>
  <div id="plansza"></div>
  <div id="alfabet-pojemnik">
    <div id="alfabet" class="hide"></div>
    <div id="kategoria"></div>
  </div>
</div>
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100vw;
  height: 100%;
}
.kontener {
  width: 800px;
  height: 100%;
  margin: 0 auto;
  background-color: black;
  overflow: hidden;
}
#szubienica {
  padding: 1em 0;
  text-align: center;
}
#szubienica img {
  width: 300px;
  height: 350px;
}
#plansza,
#alfabet-pojemnik {
  width: 100%;
  text-align: center;
  height: 3em;
  color: white;
}
#plansza {
  padding: 1.1em 0 1em 0;
  font: 300 2.4em/1.1 monospace;
}
#alfabet-pojemnik #alfabet {
  width: 75%;
  margin: 0 auto;
}
#alfabet-pojemnik #alfabet button {
  width: 2em;
  margin: 0.2em 0.2em;
  font: 900 1.4em/1.2 monospace;  
  border-radius: 0.5em;
  transition: border-color 0.25s;
}
#alfabet-pojemnik #alfabet span {
  display: block;
  margin: 1em;
}
#alfabet-pojemnik #kategoria {
  width: 70%;
  margin: 0 auto;
}
#alfabet-pojemnik #kategoria button {
  width: 6em;
  margin: 0.2em 0.2em;
  font: 300 1.1em/1.2 monospace;
}

.show { display: block; }
.hide { display: none; }

.normal {
  background-color: honeydew;
  color: black;
  border: 3px solid black;
}
.yes {
  background-color: #003300;
  color: #00C000;
  border: 3px solid #00C000;
}
.no {
  background-color: #330000;
  color: #C00000;
  border: 3px solid #C00000;
}
.yes_message {
  font: 300 1.4em/1.1 monospace;
  color: #00C000;
}
.no_message {
  font: 300 1.4em/1.1 monospace;
  color: #C00000;
}
.reset {
  cursor: pointer;
}
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', 'Daktylowiec'
  ]},
  { kategoria: 'Kraje', slowa: [
    'Stany zjednoczone', 'Tadżykistan', 'Uzbekistan',
    'Korea Południowa', 'Demokratyczna Republika Konga'
  ]},
  { kategoria: 'Miasta', slowa: [
    'Honolulu', 'Pjongjang', 'Luksemburg',
    'Edinburgh', 'Sobienie Kiełczewskie Pierwsze'
  ]},
  { kategoria: 'Zawody', slowa: [
    'Anastazjolog', 'Taksówkarz', 'Programista',
    'Specjalista od marketingu', 'Architekt'
  ]},
  { kategoria: 'Aktorzy', slowa: [
    'Jean Claude Van Damme', 'Cezary Żak', 'Tomasz Karolak',
    'Arnold Schwarzenegger', 'Vin Diesel'
  ]},
  { kategoria: 'Filmy', slowa: [
    'Szybcy i wściekli', 'Gladiator', 'Jurrasic Park',
    'Killer', 'Wilk z wall street'
  ]},
  { kategoria: 'Seriale', slowa: [
    'Wiedźmin', 'Dom z papieru', 'M jak miłość',
    'Rodzinka pl', 'Sex Education'
  ]}  
]

/*
const graj = {
  yes: 'yes.wav', no: 'no.wav',
  lose: 'lose.wav', win: 'win.wav'
}
*/

// dla demonstracji
const graj = {
  yes: 'https://freesound.org/data/previews/179/179198_33044-lq.mp3', 
  no: 'https://freesound.org/data/previews/179/179184_33044-lq.mp3',
  lose: 'https://freesound.org/data/previews/502/502915_8417500-lq.mp3', 
  win: 'https://freesound.org/data/previews/60/60443_35187-lq.mp3'
}

const MAX_ILE_POMYLEK = 9;
let ile_pomylek;

window.addEventListener('load', load);

function load() {
  wypiszKategorie();
  nowaGra();
}

function gra(e) {
  //console.log(e.target); 
  //alert(e.target);
  const id_kategoria = e.target.dataset.idKategoria,
        id_haslo = Math.round(Math.random() * (hasla[id_kategoria].slowa.length - 1));

  let haslo_maska = ukryjHaslo(hasla[id_kategoria].slowa[id_haslo]), 
      haslo = hasla[id_kategoria].slowa[id_haslo];
  wypiszHaslo(haslo_maska, haslo);

  wypiszAlfabet();
  ile_pomylek = 0;

  const alfabet_pojemnik = document.getElementById('alfabet');
  alfabet_pojemnik.classList.remove('hide');
  alfabet_pojemnik.classList.add('show');  

  const kategoria_pojemnik = document.getElementById('kategoria');
  kategoria_pojemnik.classList.remove('show');
  kategoria_pojemnik.classList.add('hide');  
}

function nowaGra() {
  const alfabet_pojemnik = document.getElementById('alfabet');
  alfabet_pojemnik.classList.remove('show');
  alfabet_pojemnik.classList.add('hide');  

  const kategoria_pojemnik = document.getElementById('kategoria');
  kategoria_pojemnik.classList.remove('hide');
  kategoria_pojemnik.classList.add('show');

  const plansza = document.getElementById('plansza');
  plansza.textContent = '';
  plansza.dataset.haslo = '';
  zaladujObrazek('0');
}

function wypiszAlfabet() {
  const alfabet = "AĄBCĆDEĘFGHIJKLŁMNŃOÓPQRSŚTUVWXYZŻŹ",
        alfabet_pojemnik = document.getElementById('alfabet');

  alfabet_pojemnik.innerHTML = '';
  for (let litera of alfabet) {
    const button = document.createElement('BUTTON');
    button.textContent = litera;
    button.classList.add('normal');
    button.addEventListener('click', sprawdz);
    alfabet_pojemnik.appendChild(button);
  } 
}

function ukryjHaslo(haslo) {
  let haslo_maska = '';
  for (let litera of haslo)
    if (litera == ' ') haslo_maska += ' ';
    else haslo_maska += '-';

  return haslo_maska;
}

function wypiszHaslo(haslo_maska, haslo = '') {
  const plansza = document.getElementById('plansza');
  plansza.textContent = haslo_maska.toUpperCase();
  if (haslo) plansza.dataset.haslo = haslo.toUpperCase();
}

function wypiszKategorie() {
  const kategoria_pojemnik = document.getElementById('kategoria');

  hasla.forEach((haslo, index) => {
    const button = document.createElement('BUTTON');
    button.textContent = haslo.kategoria;
    button.dataset.idKategoria = index;
    button.addEventListener('click', gra);
    kategoria_pojemnik.appendChild(button);
  })
}

function zaladujObrazek(numer) {
  if (numer <= MAX_ILE_POMYLEK) {
    const szubienica = document.querySelector('#szubienica img');
    szubienica.src = 'img/s' + numer + '.jpg';
  }
}

function sprawdz(e) {
  //console.log(e.target.textContent); 
  //alert(e.target.textContent);
  if (e.target.classList.contains('normal')) { // 1
    const button_litera = e.target,
          litera = button_litera.textContent;
    let haslo = document.getElementById('plansza').dataset.haslo,
        haslo_maska = document.getElementById('plansza').textContent,
        trafiona = false;

    for (let i=0; i<haslo.length; i++){
      if (haslo[i] == litera) {
        haslo_maska = haslo_maska.slice(0,i) + litera + haslo_maska.slice(i+1);
        trafiona = true;
      }
    }

    if (trafiona) { // true
      (new Audio(graj.yes)).play();
      button_litera.classList.remove('normal');
      button_litera.classList.add('yes');
      wypiszHaslo(haslo_maska);
    } else {
      (new Audio(graj.no)).play();
      button_litera.classList.remove('normal');
      button_litera.classList.add('no');
      zaladujObrazek(++ile_pomylek);
    }

    if (haslo == haslo_maska) {
      setTimeout(() => {
        (new Audio(graj.win)).play();
        wypiszKomunikat('wygrana');
      }, 500);
    } else {
      if (ile_pomylek >= MAX_ILE_POMYLEK) {
        setTimeout(() => {
          (new Audio(graj.lose)).play();
          wypiszKomunikat('przegrana', haslo);
        }, 500);
      }
    }

  } // 1
}

function wypiszKomunikat(jaki, haslo = '') {
  let komunikat = '', class_name = '';
  switch(jaki) {      
    case 'wygrana':
      komunikat = 'Tak jest! Podano prawidłowe hasło.';
      class_name = 'yes_message';
      break;
    case 'przegrana':
      komunikat = 'Przegrana! Prawidłowe hasło to: <br />' + haslo;
      class_name = 'no_message';      
      break;
  }

  const alfabet_pojemnik = document.getElementById('alfabet');
  alfabet_pojemnik.innerHTML = '';

  const span = document.createElement('SPAN');
  span.innerHTML = komunikat;
  span.className = class_name;

  const span_button = document.createElement('SPAN');
  span_button.textContent = 'JESZCZE RAZ?';
  span_button.className = 'reset';
  span_button.onclick = () => { nowaGra(); }

  alfabet_pojemnik.appendChild(span);
  alfabet_pojemnik.appendChild(span_button);
}

 

1
komentarz 8 lutego 2022 przez Asasader1 Nowicjusz (130 p.)

@VBService  Teraz działa, dziękuje pięknie za pomoc, teraz zostało mi zajać się html i css oraz na spokojnie przeanalizowac sobie kod js. Dobrze wiedzieć, że są ludzie tak pomocni jak Pan.

Pozdrawiam serdecznie

komentarz 8 lutego 2022 przez VBService Ekspert (253,340 p.)
edycja 8 lutego 2022 przez VBService

Po to jest to forum, żebyśmy sobie pomagali w miarę możliwości.  smiley

 

proponuję jeszcze taki efekt na przyciski (button-y) alfabetu

przykład

<style>
  #alfabet-przed,
  #alfabet-po {
    margin: 1em;
    padding: 1em;
    background-color: black;
    cursor: default;
  }


  /*
  div[id^="alfabet"] .title {
    padding: 0.5em 0;
    color: white;
  }
  */
  #alfabet-przed .title,
  #alfabet-po .title {
    padding: 0.5em 0;
    color: white;
  }


  #alfabet-przed button {
    width: 2em;
    margin: 0.2em 0.2em;
    font: 900 1.4em/1.2 monospace;  
    border-radius: 0.5em;
    transition: border-color 0.25s;
  } 
  #alfabet-przed .normal {
    background-color: honeydew;
    color: black;
    border: 3px solid black;
  }
  #alfabet-przed .yes {
    background-color: #003300;
    color: #00C000;
    border: 3px solid #00C000;
  }
  #alfabet-przed .no {
    background-color: #330000;
    color: #C00000;
    border: 3px solid #C00000;
  }


  #alfabet-po button {
    width: 2em;
    margin: 0.2em 0.2em;
    font: 900 1.4em/1.2 monospace;  
    border-radius: 0.5em;
    transition: all 0.25s; /* zmiana */
  }
  #alfabet-po button.normal:hover { /* dodane */
    transform: scale(1.4);
  }
  #alfabet-po .normal {
    background-color: honeydew;
    color: black;
    border: 3px solid black;
  }
  #alfabet-po .yes {
    background-color: #003300;
    color: #00C000;
    border: 3px solid #00C000;
    box-shadow: 0px 0px 6px 2px #00C000; /* dodane */
  }
  #alfabet-po .no {
    background-color: #330000;
    color: #C00000;
    border: 3px solid #C00000;
    box-shadow: 0px 0px 6px 2px #C00000; /* dodane */
  }
</style>

<div id="alfabet-przed">
  <div class="title">Przed zmianą</div>
  <button class="normal">A</button>
  <button class="normal">Ą</button>
  <button class="normal">B</button>
  <button class="normal">C</button>
  <button class="normal">Ć</button>
  <button class="normal">D</button>  
</div>
<div id="alfabet-po">
  <div class="title">Po zmianach</div>
  <button class="normal">A</button>
  <button class="normal">Ą</button>
  <button class="normal">B</button>
  <button class="normal">C</button>
  <button class="normal">Ć</button>
  <button class="normal">D</button>  
</div>

<script>
  const alfabet_przed_pojemnik = document.getElementById('alfabet-przed');
  alfabet_przed_pojemnik.addEventListener('click', sprawdz);

  const alfabet_po_pojemnik = document.getElementById('alfabet-po');
  alfabet_po_pojemnik.addEventListener('click', sprawdz);

  function sprawdz(e) {
    //console.log(e.target, e.target.textContent); 
    //alert(e.target + '\n' + e.target.textContent);


    if (e.target.nodeName == 'BUTTON') {
      const button = e.target;
      if (button.classList.contains('normal')) {
        if (['A', 'C', 'D'].includes(button.textContent)) {
          button.classList.remove('normal');
          button.classList.add('yes');
        } else {
          button.classList.remove('normal');
          button.classList.add('no');      
        }
      } else {
        button.classList.remove('yes', 'no');
        button.classList.add('normal');    
      }
    }
  }
</script>

 

 

wink

 

komentarz 8 lutego 2022 przez VBService Ekspert (253,340 p.)

czyli,

#alfabet-pojemnik #alfabet button {
  width: 2em;
  margin: 0.2em 0.2em;
  font: 900 1.4em/1.2 monospace;  
  border-radius: 0.5em;
  transition: all 0.25s;
}
#alfabet-pojemnik #alfabet button.normal:hover {
  transform: scale(1.4);
}
 
.yes {
  background-color: #003300;
  color: #00C000;
  border: 3px solid #00C000;
  box-shadow: 0px 0px 6px 2px #00C000;
}
.no {
  background-color: #330000;
  color: #C00000;
  border: 3px solid #C00000;
  box-shadow: 0px 0px 6px 2px #C00000;
}

 

Podobne pytania

0 głosów
1 odpowiedź 232 wizyt
pytanie zadane 23 czerwca 2022 w C i C++ przez kuki_shin Użytkownik (620 p.)
+1 głos
1 odpowiedź 632 wizyt
pytanie zadane 22 lipca 2016 w JavaScript przez Gromixson Początkujący (260 p.)
0 głosów
3 odpowiedzi 2,467 wizyt
pytanie zadane 12 czerwca 2016 w JavaScript przez jelonek2006 Początkujący (420 p.)

92,572 zapytań

141,423 odpowiedzi

319,645 komentarzy

61,959 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...