У меня есть 2 билетные кассы, но работает только 1. Изо всех сил пытаюсь понять, в чем проблема - ProgramBox

ProgramBox

У меня есть 2 билетные кассы, но работает только 1. Изо всех сил пытаюсь понять, в чем проблема

Post author:admin
Запись опубликована:9 января, 2022
Post category:Вопросы по программированию

#javascript #html #css

Вопрос:

Я создаю билетную кассу для работы, на которой я работаю. но хотя я новичок и могу довольно хорошо понимать JS, так как прошел полный курс, так что он медленно возвращается ко мне. Но я изо всех сил пытаюсь понять, в чем проблема с этим. Работает только 1 счетчик, по любой причине, по которой другой не работает.

Вот код ниже

 <style>
searchsection{
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
leftsection{
    display: flex;
    flex-flow: column wrap;
    width: 80%;
}
#locationbar{
    display: flex;
    justify-content: space-between;
    background-color: #08538B;
    margin: 0.2em 0em;
    height: 4em;
    color: white;
    font-size: 200%;
    cursor: pointer;
}
select{
    text-indent: 5%;
}
leftsection activitybar{
    display: flex;
    justify-content: space-between;
    background-color: #20A8B1;
    margin: 0.5em 0em;
}

leftsection activitybar stays, eats, thingstodo{
        color: white;
    display: flex;
    justify-content: space-evenly;
    background-color: #20A8B1;
    align-items: center;
    width: 15%;
    letter-spacing: 0.1em;
        margin: 0 5%;
}
booking{
    display: flex;
    justify-content: space-between;
    letter-spacing: 0.1em;
}
booking checkin, checkout, kids, adults{
    display: flex;
    flex-flow: column;
    align-items: center;
    background-color: #20A8B1;
    width: 23%;
    color: #fcc765;
}
booking checkin h3, checkout h3, kids h3, adults h3{
    color: #fcc765;
}
booking counter{
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    font-size: 200%;
}
bookbutton{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-image: url("http://wheremydogsat.co.uk/wp-content/uploads/2021/09/DOG-SAT_Paw-Blue.png");
    background-size: contain;
    width: 150px;
    height: 150px;
    background-repeat: no-repeat;
    margin: 2em;
    cursor: pointer;
    z-index: 2;
}
#bookbuttonshadow{
    z-index: 1;
}
.hidden{
    display: none;
}
h3{
    color: white;
}

.scale12{
    transition: transform ease-in-out 0.2s;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.scale12:hover{
    transform: scale(1.4);
    text-decoration: none;
}
.scale12:active{
    transition: transform ease-in-out 0.01s;
    transform: scale(2)
}
</style>
    <searchsection>
        <leftsection>
            <select name="locations" id="locationbar">
                <option value="Leeds">Leeds</option>
                <option value="Sheffield">Sheffield</option>
                <option value="Doncaster">Doncaster</option>
                <option value="Liverpool">Liverpool</option>
                <option value="Manchester">Manchester</option>
            </select>
            <activitybar>
                <stays id="">
                    <h3>Stays</h3>
                    <img src="http://wheremydogsat.co.uk/wp-content/uploads/2021/09/DOG-SAT_Search-STAYS_WO.png" width="30" height="30">
                </stays>
                <eats id="">
                    <h3>Eats</h3>
                    <img src="http://wheremydogsat.co.uk/wp-content/uploads/2021/09/DOG-SAT_Search-EATS_WO.png" width="50" height="50">
                </eats>
                <thingstodo id="">
                    <h3>Things to do</h3>
                    <img src="http://wheremydogsat.co.uk/wp-content/uploads/2021/09/DOG-SAT_Search-DO_WO.png" width="50" height="50">
                </thingstodo>
            </activitybar>
            <booking>
                <checkin>
                    <h3>Check in</h3>
                    <img src="http://wheremydogsat.co.uk/wp-content/uploads/2021/09/DOG-SAT_Search-Cal_WO.png" width="40" height="40">
                </checkin>
                <checkout>
                    <h3>Check out</h3>
                    <img src="http://wheremydogsat.co.uk/wp-content/uploads/2021/09/DOG-SAT_Search-Cal_WO.png" width="40" height="40">
                </checkout>
                <adults>
                    <h3>Adults</h3>
                    <counter>
                        <a class="scale12" id="a-minus"><h3>-</h3></a>
                        <h2 id="a-counter">0</h2>
                        <a class="scale12" id="a-plus"><h3> </h3></a>
                    </counter>
                </adults>
                <kids>
                    <h3>Kids</h3>
                    <counter>
                        <a class="scale12" id="k-minus"><h3>-</h3></a>
                        <h2 id="counterKids" id="k-counter">0</h2>
                        <a class="scale12" id="k-plus"><h3> </h3></a>
                    </counter>
                </kids>
            </booking>
        </leftsection>
        <bookbutton id="bookbutton">
            <img src="https://th.bing.com/th/id/R.59425c996b6e089f36cc3e4bf68bdeea?rik=pqf2QNBnlvXXAQamp;riu=http://4.bp.blogspot.com/-oH465XaJjpY/T8yZVJsteTI/AAAAAAAAADs/LwFrlgaVVv0/s1600/dog_paw_print_black.pngamp;ehk=qvW8MtpLlEUV8sGE6u3EYf/w3rPjWyDNgaBSYjM7klk=amp;risl=amp;pid=ImgRawamp;r=0" id="bookbuttonshadow" class="hidden" width="130" height="130">
        </bookbutton>
        
    </searchsection>
<script>
function adultbooking(){
    let aCounter = document.querySelector('#a-counter');
    let aMinus = document.querySelector('#a-minus');
    let aPlus = document.querySelector('#a-plus');

    let Acount = 0;

    updateDisplay();

    aPlus.addEventListener("click",()=>{
        Acount  ;
        updateDisplay();
    }) ;

    aMinus.addEventListener("click",()=>{
        updateDisplay();
        if(Acount <= 0){
            Acount = 0;
        }else{
            Acount--;
        }
    });

    function updateDisplay(){
        aCounter.innerHTML = Acount;
    };
}
adultbooking();

function kidsbooking(){
    let kCounter = document.querySelector('#k-counter');
    let kMinus = document.querySelector('#k-minus');
    let kPlus = document.querySelector('#k-plus');

    let Kcount = 0;

    updateDisplay();

    kPlus.addEventListener("click",()=>{
        Kcount  ;
        updateDisplay();
    });

    kMinus.addEventListener("click",()=>{
        updateDisplay();
        if(Kcount <= 0){
            Kcount = 0;
        }else{
            Kcount--;
        }
    });

    function updateDisplay(){
        kCounter.innerHTML = Kcount;
    };
}
kidsbooking();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
$(document).ready(() => {
    $('#bookbutton').hover(
        function () {
            $(#bookbuttonshadow).removeClass('hidden');
        }, 
        function () {
            $(#bookbuttonshadow).addClass('hidden');
        }
    );
    console.log('This works');
});

</script>

Комментарии:

1. У вас есть два удостоверения личности <h2 id="counterKids" id="k-counter">0</h2>

2. Теперь это работает, спасибо. Знал, что это будет что-то придирчивое, подобное тому, что я не мог заметить.

Метки: в чем проблема?, но работает только 1. Изо всех сил пытаюсь понять, У меня есть 2 билетные кассы