Clicker show/hide numbers

pytanie zadane 24 października 2021 w JavaScript przez void6 Użytkownik (790 p.)

Cześć,

Robię prosty clicker z 3 przyciskami +, 0, -

Potrzebuję zrobić, aby po klinknięciu przycisku np. Increase randomo wyświetał mi się +1(to już mam zrobione), teraz tylko aby po wyświetleniu +1 znikało poprzednie. Czyli; klikam wyświetla się randomowo +1 na ekranie, po czym znika gdy znowu kliknę, taki trochę toggle. Fajne gdyby to miało też na sobie jakiś transition z .5s ease all.

demo: codepen

dzięki

1 odpowiedź

odpowiedź 24 października 2021 przez ScriptyChris Mędrzec (190,190 p.)

onePlus = () => {
  const plus = document.createElement("i");
  plus.classList.add("fal");
  plus.classList.add("fa-plus");
  plus.append("1");

  plus.style.top = 100 * Math.random() + "%";
  plus.style.left = 100 * Math.random() + "%";
  plus.style.fontSize = Math.random() * 48 + "px";
  plus.style.position = "fixed";
  plus.style.display = "block";

  document.body.appendChild(plus);
};

Patrząc na kod funkcji onePlus z podlinkowanego dema, wg mnie jest kilka sposobów:

przypisuj nowo tworzony element <i> do zmiennej (może być ta już istniejąca plus), której scope jest poza funkcją onePlus i z każdym jej wywołaniem usuwaj z DOM ten element przy użyciu metody remove zanim utworzysz nową ikonę i przypiszesz do tej samej zmiennej
przed dodaniem do DOM nowej ikony, znajduj poprzednią, np. przy użyciu document.querySelector i ją usuwaj
możesz te ikony umieszczać w dedykowanym kontenerze, zamiast po prostu w <body>, i wtedy przed dodaniem nowej ikony usunąć pierwsze dziecko z kontenera; tutaj możesz posłużyć się property children na kontenerze i podać odpowiedni (w tym przypadku, pierwszy) indeks i usunąć ten element z kontenera (ponownie metoda remove)
możesz cały czas operować na jednym elemencie DOM, którym jest ta ikona, a w funkcji onePlus zmieniaj jej tylko style i tekst (zamiast usuwać poprzednią i potem dodawać następną); wtedy wypadałoby zmienić nazwę funkcji na np. modifyIndicatorIcon

komentarz 25 października 2021 przez VBService Ekspert (253,340 p.)

W oparciu o ostatni punkt z listy @ScriptyChris, taka "zajawka".

komentarz 26 października 2021 przez void6 Użytkownik (790 p.)

@ScriptyChris, hah, działa code

Teraz jakiś transition. ogółem chciałbym uzyskać coś takiego - code

chciałbym zrobić tak, aby +1 wyświetlał się randomo tylko w obrębie

komentarz 26 października 2021 przez VBService Ekspert (253,340 p.)
edycja 26 października 2021 przez VBService

Może dodaj animację css.

.fa-plus, .fa-minus {
  color: #fff;
  opacity: 0;
  animation: fade_out 2s;
}

@keyframes fade_out {
  20%, 60% { opacity: 1; }
  to { opacity: 0; }
}

komentarz 26 października 2021 przez VBService Ekspert (253,340 p.)
edycja 26 października 2021 przez VBService

Proponuję takie zmiany w

/* Twój css + to co poniżej */

.fal {
  position: fixed;
  display: block;
  color: #fff;
  opacity: 0;
  animation: fade_out 1.1s;
}
.fa-plus {
  color: green;
  text-shadow: 0 0 8px darkgreen;
}
.fa-minus {
  color: red;
  text-shadow: 0 0 8px darkred;
}
@keyframes fade_out {
  20%, 60% { opacity: 1; }
  to { opacity: 0; }
}

const click = document.querySelector('.clicker');
const btnIncrease = document.querySelector('.increase');
const btnReset = document.querySelector('.reset');
const btnDecrease = document.querySelector('.decrease');
const body = document.body;
 
onePlusOneMinus = (name) => {
  if (document.querySelector(".fal")) document.querySelector(".fal").remove();
  const i_ele = document.createElement('i');
  i_ele.classList.add('fal');
  i_ele.classList.add('fa-' + name);
  i_ele.append('1')
 
  i_ele.style.top = (100*Math.random()) + "%";
  i_ele.style.left = (100*Math.random()) + "%";
  i_ele.style.fontSize = Math.random() * 64 + 'px';
  i_ele.style.transform="rotate(" + Math.random() * 20 + "deg)"
 
  body.appendChild(i_ele);
} 
 
let clicks = 0;
btnIncrease.addEventListener('click', function() {  
  click.innerHTML = ++clicks;
  onePlusOneMinus('plus');
}) 
 
btnReset.addEventListener('click', function() {
  click.innerHTML = clicks = 0;
})
 
btnDecrease.addEventListener('click', function() {
  click.innerHTML = --clicks;
  onePlusOneMinus('minus');
})