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

Wywołanie funkcja- gra wisielca

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
718 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 (256,320 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 (256,320 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 (256,320 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 (256,320 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ź 378 wizyt
pytanie zadane 23 czerwca 2022 w C i C++ przez kuki_shin Użytkownik (620 p.)
+1 głos
1 odpowiedź 663 wizyt
pytanie zadane 22 lipca 2016 w JavaScript przez Gromixson Początkujący (260 p.)
0 głosów
3 odpowiedzi 2,776 wizyt
pytanie zadane 12 czerwca 2016 w JavaScript przez jelonek2006 Początkujący (420 p.)

93,189 zapytań

142,204 odpowiedzi

322,030 komentarzy

62,518 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2817p. - dia-Chann
  2. 2769p. - Łukasz Piwowar
  3. 2759p. - Łukasz Eckert
  4. 2738p. - CC PL
  5. 2704p. - Tomasz Bielak
  6. 2678p. - Łukasz Siedlecki
  7. 2666p. - rucin93
  8. 2485p. - Marcin Putra
  9. 2418p. - Michal Drewniak
  10. 2367p. - Adrian Wieprzkowicz
  11. 2317p. - Mikbac
  12. 2239p. - Michał Telesz
  13. 2156p. - Anonim 3619784
  14. 1733p. - rafalszastok
  15. 1628p. - Dominik Łempicki (kapitan)
Szczegóły i pełne wyniki

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...