Wstawianie liczby do tablicy po kliknięciu w button

0

Hej, mam do zrobienia zadanie o następującej treści:

Kolejka do elektronicznego systemu obsługi: do dyspozycji mamy dwa przyciski "nowy klient" (dodaje klienta do kolejki) oraz "obsłuż klienta" (klient pierwszy w kolejce zostaje obsłużony i usunięty). Poniżej wyświetlany jest stan kolejki (np. w postaci poziomej tabeli). Jeszcze niżej wyświetlana jest lista wykonanych operacji (najnowsza operacja znajduje się na górze): "klient X pojawił się o godzinie GGSS" albo "klient X został obsłużony o godzinie GGSS". Klienci są reprezentowani przez kolejne wartości całkowite rozpoczynając od 1. Maksymalny rozmiar kolejki to 10 - próba dodania nowego klienta skutkuje komunikatem "dla klienta X nie ma miejsca w kolejce".

Udało mi się wymyślić tylko tyle co poniżej czyli w sumie tyle co nic. Moim głównym problemem jest to jak napisać skrypt, żeby przycisk dodawał po jednej wartości do tablicy na każde kliknięcie. Jedyne na co wpadłam to pętla, a ona dodaje wszystko na raz

var $nowyKlient = document.getElementById('nowyKlient');
var $obsluzKlienta = document.getElementById('obsluzKlienta');
var $stanKolejki = document.getElementById('stanKolejki');
var $godzinaObsluzenia = document.getElementById('godzinaObsluzenia');

var tablicaKolejki = [];
var klient = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

$nowyKlient.onclick = function () {
    tablicaKolejki.push(klient[0]);
    
    $stanKolejki.innerHTML = tablicaKolejki

}

tutaj część html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Zestaw B</title>
</head>
<body>
    <div><h3>Zadanie 5</h3></div>
    <button id="nowyKlient" type="button">Nowy klient</button></br>
    <button id="obsluzKlienta" type="button">Obsłuż klienta</button>
    <div id="stanKolejki"></div>
    <div id="godzinaObsluzenia"></div>
    <script src="ZestawB.js"></script>
</body>
</html>

jeśli zrobiłam jakieś błędy w samej treści postu, przepraszam, jestem tu po raz pierwszy :)

0

Na początek zapoznaj się z bardzo podobnym wątkiem - Wyszukiwanie nie działa prawidłowo. Tam też było dynamiczne dodawanie i kasowanie elementów. Myślę, że jak chwilę posiedzisz to dasz radę sobie przerobić podany przeze mnie skrypt. W razie czego jak napotkasz konkretny problem to pisz/pytaj :)

1

Może taka koncepcja Ci coś rozjaśni i pomoże.

    <button id="wejscie">Pobierz numerek</button>
    <button id="wyjscie">Zapraszamy do okienka</button>
    <div class="stan-kolejki">Zapraszamy pierwszego klienta</div>
    <div class="komunikaty">Komunikaty</div>
    <div class="container">
        <h2>Załatwione sprawy</h2>
        <div class="sprawy-zalatwione">
        </div>
    </div>

class Start {
    constructor(tablicaKolejka = [], tablicaZalatwione = []) {
        this.tablicaKolejka = tablicaKolejka;
        this.tablicaZalatwione = tablicaZalatwione;
    }
    dodajDoTablicy(el) {
        this.tablicaKolejka.push(el);
    }
    usunZtablicy() {
        this.tablicaKolejka.shift();
    }
}
const wejscie = document.getElementById("wejscie");
const wyjscie = document.getElementById("wyjscie");
const komunikaty = document.querySelector('.komunikaty');
const stanKolejki = document.querySelector('.stan-kolejki');
const zalatwione = document.querySelector('.sprawy-zalatwione');
let numerki = 1;

const reverseList = () => {
    const lista = document.getElementById("listaSprawZalatwionych");
    const li = [...lista.querySelectorAll('li')];
    const liReverse = li.reverse();
    liReverse.forEach(function (el) {
        lista.appendChild(el);
    })
}

const listaSprawZalatwionych = function () {
    const ol = document.createElement('ol');
    ol.id = "listaSprawZalatwionych";
    on.tablicaZalatwione.forEach(function (el) {
        const li = document.createElement('li');
        li.innerHTML = `Klient: ${el.el}  <br> pojawił się przy okienku: ${el.czas}`;
        ol.appendChild(li);
    })
    return ol;
}
const sprawaZalatwiona = (el) => {
    const time = Date();
    on.tablicaZalatwione.unshift({
        el: el,
        czas: time
    });
    zalatwione.innerHTML = '';
    zalatwione.appendChild(listaSprawZalatwionych());
}

const pobierzNumerek = () => {
    if (on.tablicaKolejka.length >= 10) komunikaty.innerHTML = `Kolejka jest pełna, brak miejsc`;
    else {
        on.dodajDoTablicy(numerki++);
        stanKolejki.innerHTML = `Liczba oczekujących: ${on.tablicaKolejka.length}`;
        komunikaty.innerHTML = `Zapraszamy do kolejki`;
    }
}

const zapraszamyDoOkienka = () => {
    if (on.tablicaKolejka.length > 0) {
        sprawaZalatwiona(on.tablicaKolejka[0]);
        reverseList();
        on.usunZtablicy();

        stanKolejki.innerHTML = `Liczba oczekujących: ${on.tablicaKolejka.length}`;
        komunikaty.innerHTML = `Zapraszamy do kolejki`;
    } else {
        alert("Kolejka jest pusta")
    }

}


const on = new Start();
wejscie.addEventListener("click", pobierzNumerek);
wyjscie.addEventListener("click", zapraszamyDoOkienka);

1 użytkowników online, w tym zalogowanych: 0, gości: 1