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

Stworzenie przycisku z plusem i minusem.

VPS Starter Arubacloud
+1 głos
116 wizyt
pytanie zadane 2 maja 2021 w HTML i CSS przez ShockWave Bywalec (2,350 p.)
edycja 2 maja 2021 przez ShockWave

Cześć, potrzebuje pomocy ze stworzeniem przycisku, który będzie wyglądać jak ten w załączniku.

Znalazłem w sieci przykład z wykorzystaniem angulara, lecz niestety nie mogę go wykorzystać.

Mam też pytanie jak napisać w js funkcjonalność, która ograniczała by wartość w przycisku do danych pobieranych z zewnętrznego json.

Oto przycisk, z góry dziękuję za pomoc.

 

komentarz 2 maja 2021 przez ScriptyChris Mędrzec (190,190 p.)

Pytasz konkretnie o zrobienie znaków "-" i "+" w CSS? Na upartego można tam wstawić encje HTML: + oraz −

 

komentarz 2 maja 2021 przez ShockWave Bywalec (2,350 p.)
Faktycznie to nie było takie trudne, gorzej sprawa wygląda z js i pobieraniem odpowiedniej ilości z json.

1 odpowiedź

0 głosów
odpowiedź 2 maja 2021 przez Landu Stary wyjadacz (11,880 p.)
edycja 2 maja 2021 przez Landu

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Licznik</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js' defer></script>
</head>
<body>
    <div id="counter">
        <button id="subtract">-</button>
        <span id="count">0</span>
        <button id="add">+</button>
    </div>
</body>
</html>

 

CSS:

#counter {
    display: inline-block;
    background: #ececec;
    border: 1px solid black;
    border-radius: 0.5rem;
}

#counter button {
    margin: 0 1rem;
    padding: 0.6rem 1rem;
    border: none;
    color: blue;
    font-size: 2rem;
    background: none;
}

#counter span {
    font-size: 2rem;
    margin: 0rem 1rem;
}


JS:

const btn_add = document.getElementById("add");
const btn_subt = document.getElementById("subtract");
const count = document.getElementById("count");

function updateCounter(action) {
    // 0 (false) - odjąć, 1 (true) - dodać
    let temp = parseInt(count.innerHTML);
    action ? temp++ : temp--;
    count.innerHTML = temp;
}

btn_add.addEventListener('click', () => {
    updateCounter(true);
});

btn_subt.addEventListener('click', () => {
    updateCounter(false);
});

 

Co do tego JSONa to:

const response = {
    min: -5,
    max: 5
}

function updateCounter(action) {
    // 0 (false) - odjąć, 1 (true) - dodać
    let temp = parseInt(count.innerHTML);
    
    if(action) {
        temp++;
        if(temp > response.max) return;
    } else {
        temp--;
        if(temp < response.min) return;
    }
    count.innerHTML = temp;
}

 

komentarz 2 maja 2021 przez ShockWave Bywalec (2,350 p.)
Przycisk nie jest wystylowany dokladnie tak jak na zdjęciu, ale już sobie poradziłem. Dziękuję.
komentarz 3 maja 2021 przez ScriptyChris Mędrzec (190,190 p.)

@Landu, na przyszłość proszę żebyś nie dawał gotowców, gdy to nie jest konieczne, ponieważ one nie są mile widziane na forum.

komentarz 3 maja 2021 przez VBService Ekspert (251,210 p.)

@Landu,  wink

 

const response = {
    min: -5,
    max: 5
}

function updateCounter(action) {
    // 0 (false) - odjąć, 1 (true) - dodać
    let temp = parseInt(count.textContent);
    action ? temp++ : temp--;
    if (temp >= response.min && temp <= response.max)
      count.textContent = temp;
}

 

1
komentarz 3 maja 2021 przez Landu Stary wyjadacz (11,880 p.)
No dobra, tego nie przemyślałem :D

Podobne pytania

0 głosów
0 odpowiedzi 70 wizyt
pytanie zadane 4 listopada 2021 w Hostingi, domeny, usługi przez Szczepan3 Nowicjusz (120 p.)
+1 głos
4 odpowiedzi 199 wizyt
pytanie zadane 2 lutego 2021 w HTML i CSS przez kapsel5308 Początkujący (360 p.)
+1 głos
2 odpowiedzi 1,156 wizyt
pytanie zadane 19 listopada 2020 w C i C++ przez Lukies Nowicjusz (130 p.)

92,454 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...