Member 14104448 Ответов: 2

Я хочу знать, как получить элементы с DOM

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="uft-8">
        <title>Pomodoro Timer</title>
    </head>
    <body>
        <p class="menu">menu</p>
        <p class="display-time"><span class='display' ditail='hours' >00</span><span>:</span><span class='display' ditail='minutes'>00</span><span>:</span><span class='display' ditail='minutes'>00</span></p>
        <div time-option='hours' class='set_time'>
            <button class='high' class='set_hours'>+</button>
            <button class='low'  class='set_hours'>-</button>
        </div>
        <div time-option='minutes' class='set_time'>
            <button class='high' class='set_minutes'>+</button>
            <button class='low'  class='set_minutes'>-</button>
        </div>
        <div time-option='seconds' class='set_time'>
            <button class='high' class='set_seconds'>+</button>
            <button class='low'  class='set_seconds'>-</button>
        </div>
        <button data-option='start' class="timer_button" >start</button>
        <button data-option='stop'  class="timer_button">stop</button>
        <button data-option='reset' class="timer_button">reset</button>
        <script>
        const buttons = document.querySelectorAll('.timer_button');
        const forSetTime = document.querySelectorAll('.set_time');
        const st1 = document.getElementsByClassName('high');
        const st2 = document.getElementsByClassName('low');
        
        
        function test(e){
            console.log(e);
        }

        function functionForSetTime(e){
           // console.log(e);
           if(e.target.includes('high')){
                console.log('a');
             }else{
            console.log('ew');}
        }
                     
        buttons.forEach((buttons)=>buttons.addEventListener('click',test));
        forSetTime.forEach((forSetTime)=>forSetTime.addEventListener('click',functionForSetTime));
        </script>
    </body>
</html>


Что я уже пробовал:

Я пробовал некоторые вещи, например, если включает в себя() метод работы, но это было не так, я думаю.
Я хотел бы получить элементы с использованием классов "high" и "low", потому что я хочу создать таймер, поэтому, когда я добавляю время, для этого я хочу получить элементы оттуда и добавить время из dom, а позже я хочу переписать информацию с помощью innerHTML.

2 Ответов

Рейтинг:
1

Eric Lynch

Если это быстрый проект, то следующее очень просто...

Метод HTML DOM getElementsByClassName() [^]

Если вы будете делать много такого рода вещей, вы можете проверить jQuery...

учебник по jQuery[^]

Конкретно...

jQuery .селектор классов[^]

Обновление: я замечаю, что после более тщательного перечитывания вашего вопроса вы, возможно, пытались getElementsByClassName Если это так, то вам, вероятно, следует улучшить свой вопрос, чтобы указать, что именно специфический проблема(ы), с которой вы столкнулись. Например, вы получили ошибку? Если да, то какая ошибка? Или он не вел себя так, как вы ожидали? Если да, то каковы были ваши ожидания и каким образом конкретно неужели она не встретила их? В противном случае, это трудно для кого-либо, чтобы помочь вам за пределами размещения некоторых ссылок на документацию.

Рейтинг:
1

Bryian Tan

Цитата:
Я пробовал некоторые вещи, например, если включает в себя() метод работы, но это было не так, я думаю.
Я хотел бы получить элементы с использованием классов "high" и "low", потому что я хочу создать таймер, поэтому, когда я добавляю время, для этого я хочу получить элементы оттуда и добавить время из dom, а позже я хочу переписать информацию с помощью innerHTML.


Глядя на код и сообщение, Я предполагаю, что код пытается проверить, ассоциируется ли класс (высокий/низкий) с кнопкой? Вы можете изменить код, чтобы использовать цель className атрибут. includes() функция может не подходить, как правило, ее использование заключается в проверке того, является ли строка частью другой строки или является ли значение в массиве. e.target очевидно, что это не тип строки или массива.

if(e.target.className == 'high'){
                console.log('a');
             }


Array.prototype.includes() | MDN[^]
Строку.прототип.включает() | МДН[^]